From 4d2e9dcf637647548ee602b155d43586c98e5177 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 08:56:10 +0200 Subject: [PATCH 001/143] Menues per subtype --- FloatingSpace/FloatingObject.js | 29 +++--- FloatingSpace/NoteSets.js | 2 +- FloatingSpace/ProfileBalls.js | 2 +- FloatingSpace/StrategyPart.js | 152 +++++++++++++++++++------------- FloatingSpace/StrategyParts.js | 27 +++--- 5 files changed, 123 insertions(+), 89 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 20aab6a21..5f17169c9 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -15,6 +15,7 @@ function newFloatingObject () { payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. + underlayingObject: undefined, physicsEnabled: false, @@ -58,21 +59,19 @@ function newFloatingObject () { } - let underlayingObject - thisObject.eventHandler = newEventHandler() return thisObject - function initialize (pType, floatingLayer, callBackFunction) { + function initialize (pType, pSubType, floatingLayer, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } switch (pType) { case 'Profile Ball': { - underlayingObject = newProfileBall() - underlayingObject.initialize(onInitialized) + thisObject.underlayingObject = newProfileBall() + thisObject.underlayingObject.initialize(onInitialized) function onInitialized (err) { @@ -81,8 +80,8 @@ function newFloatingObject () { break } case 'Note': { - underlayingObject = newNote() - underlayingObject.initialize(onInitialized) + thisObject.underlayingObject = newNote() + thisObject.underlayingObject.initialize(onInitialized) function onInitialized (err) { @@ -91,8 +90,8 @@ function newFloatingObject () { } case 'Strategy Part': { - underlayingObject = newStrategyPart() - underlayingObject.initialize(floatingLayer, onInitialized) + thisObject.underlayingObject = newStrategyPart() + thisObject.underlayingObject.initialize(floatingLayer, pSubType, onInitialized) function onInitialized (err) { @@ -124,7 +123,7 @@ function newFloatingObject () { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - underlayingObject.physicsLoop() + thisObject.underlayingObject.physicsLoop() if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { @@ -138,7 +137,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 2.5 thisObject.targetFontSize = thisObject.rawFontSize * 2.5 - underlayingObject.onMouseOver() + thisObject.underlayingObject.onMouseOver() } function onMouseNotOver () { @@ -146,19 +145,19 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - underlayingObject.onMouseNotOver() + thisObject.underlayingObject.onMouseNotOver() } function onMouseClick (pPoint) { - underlayingObject.onMouseClick(pPoint, thisObject) + thisObject.underlayingObject.onMouseClick(pPoint, thisObject) } function drawBackground () { - underlayingObject.drawBackground(thisObject) + thisObject.underlayingObject.drawBackground(thisObject) } function drawForeground () { - underlayingObject.drawForeground(thisObject) + thisObject.underlayingObject.drawForeground(thisObject) } function initializeMass (suggestedValue) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index f341d8aab..a5acfa44f 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -219,7 +219,7 @@ function newNoteSets () { */ let floatingObject = newFloatingObject() - floatingObject.initialize('Note', floatingLayer, onInitialized) + floatingObject.initialize('Note', '', floatingLayer, onInitialized) function onInitialized (err) { if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Entering function.') } diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 65a0e4a95..627bb7fe8 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -41,7 +41,7 @@ function newProfileBalls () { function createNewProfileBall (pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', floatingLayer, onInitialized) + floatingObject.initialize('Profile Ball', '', floatingLayer, onInitialized) function onInitialized (err) { floatingObject.payload = pPayload diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 41bea693e..b1963cbf1 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -1,7 +1,7 @@ function newStrategyPart () { let thisObject = { - + type: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, @@ -12,53 +12,89 @@ function newStrategyPart () { } - let ballStringMenu = [ - { - visible: false, - imagePathOn: 'Images/menu.icon.on.1.gif', - imagePathOff: 'Images/menu.icon.off.1.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 60 - }, - { - visible: false, - imagePathOn: 'Images/menu.icon.on.2.gif', - imagePathOff: 'Images/menu.icon.off.2.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 * 1 - }, - { - visible: false, - imagePathOn: 'Images/menu.icon.on.3.gif', - imagePathOff: 'Images/menu.icon.off.3.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { - visible: false, - imagePathOn: 'Images/menu.icon.on.4.gif', - imagePathOff: 'Images/menu.icon.off.4.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -60 - } - ] + let ballStringMenu = [] let floatingLayer let isMouseOver = false return thisObject - function initialize (pFloatingLayer, callBackFunction) { + function initialize (pFloatingLayer, pType, callBackFunction) { floatingLayer = pFloatingLayer + switch (pType) { + case 'Strategy': { + break + } + case 'Strategy Entry': { + break + } + case 'Strategy Exit': { + break + } + case 'Trade Entry': { + break + } + case 'Trade Exit': { + break + } + case 'Stop': { + break + } + case 'Take Profit': { + break + } + case 'Phase': { + break + } + case 'Situation': { + break + } + case 'Condition': { + ballStringMenu = [ + { + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/html.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + visible: false, + imagePathOn: 'Images/icons/style-01/settings.png', + imagePathOff: 'Images/icons/style-01/settings.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }, + { + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/tools.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/trash.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -60 + }] + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + pType) } + } + } + for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] @@ -106,7 +142,7 @@ function newStrategyPart () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.targetRadius = menuItem.rawRadius * 2.5 + menuItem.targetRadius = menuItem.rawRadius * 1.5 } isMouseOver = true @@ -177,14 +213,13 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { + if (pFloatingObject.payload.parentNode === undefined) { return } + /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ + let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - if (pFloatingObject.payload.parentNode !== undefined) { - let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - - pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y - } + pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y /* Here I continue painting the background */ @@ -202,7 +237,7 @@ function newStrategyPart () { browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' - browserCanvasContext.setLineDash([4, 2]) + browserCanvasContext.setLineDash([1, 4]) browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() browserCanvasContext.setLineDash([0, 0]) @@ -224,28 +259,19 @@ function newStrategyPart () { function drawForeground (pFloatingObject) { if (pFloatingObject.currentRadius > 5) { /* Contourn */ - +/* browserCanvasContext.beginPath() browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() + */ } if (pFloatingObject.currentRadius > 0.5) { /* Main FloatingObject */ - var alphaA - - if (pFloatingObject.currentRadius < 3) { - alphaA = 1 - } else { - alphaA = 0.75 - } - - alphaA = 0.75 - browserCanvasContext.beginPath() browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() @@ -253,6 +279,14 @@ function newStrategyPart () { browserCanvasContext.fillStyle = pFloatingObject.fillStyle browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 1 / 3, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' + + browserCanvasContext.fill() } /* Image */ diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index ae0d78a8a..1cef46868 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -34,7 +34,8 @@ function newStrategyParts () { function createNewStrategyPart (type, pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) + floatingObject.initialize('Strategy Part', type, floatingLayer, onInitialized) + floatingObject.underlayingObject.type = type function onInitialized (err) { const FRICTION = 0.97 @@ -90,8 +91,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(100) - floatingObject.initializeRadius(60) - floatingObject.initializeImageSize(110) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' @@ -101,8 +102,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(50) - floatingObject.initializeRadius(45) - floatingObject.initializeImageSize(80) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' @@ -112,8 +113,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(40) - floatingObject.initializeImageSize(70) + floatingObject.initializeRadius(35) + floatingObject.initializeImageSize(60) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' @@ -123,22 +124,22 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(35) - floatingObject.initializeImageSize(60) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' } function level_5 () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) + floatingObject.initializeRadius(25) + floatingObject.initializeImageSize(40) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' } floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' From a87a9b58da00ed292f1fde43ed8dc2a1a440cd19 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 09:03:59 +0200 Subject: [PATCH 002/143] Code Cleaning --- FloatingSpace/FloatingObject.js | 13 ++----------- FloatingSpace/Note.js | 8 ++++---- FloatingSpace/ProfileBall.js | 10 ++++------ FloatingSpace/StrategyPart.js | 10 +--------- 4 files changed, 11 insertions(+), 30 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 5f17169c9..1ca828acd 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -81,22 +81,13 @@ function newFloatingObject () { } case 'Note': { thisObject.underlayingObject = newNote() - thisObject.underlayingObject.initialize(onInitialized) - - function onInitialized (err) { - - } + thisObject.underlayingObject.initialize() break } case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType, onInitialized) - - function onInitialized (err) { - - } - + thisObject.underlayingObject.initialize(floatingLayer, pSubType) break } default: { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 7fb35b9b9..26e76668d 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -14,8 +14,8 @@ function newNote () { return thisObject - function initialize (callBackFunction) { - callBackFunction() + function initialize () { + } function physicsLoop () { @@ -214,7 +214,7 @@ function newNote () { if (label !== undefined) { if (SIZE_PERCENTAGE > 0.9) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2 @@ -292,7 +292,7 @@ function newNote () { y: startingPosition.y + (i + 1) * (fontSize * FONT_ASPECT_RATIO + 10) } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, ' + ALPHA + ')' browserCanvasContext.fillText(labelRow, labelPoint.x, labelPoint.y) } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 426f0ad1a..2e0c52f8f 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -53,7 +53,7 @@ function newProfileBall () { return thisObject - function initialize (callBackFunction) { + function initialize () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] @@ -77,8 +77,6 @@ function newProfileBall () { menuItem.icon = menuItem.iconOn // The default value is ON. } - - callBackFunction() } function physicsLoop () { @@ -278,7 +276,7 @@ function newProfileBall () { let labelPoint let fontSize = pFloatingObject.currentFontSize - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -290,7 +288,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -303,7 +301,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b1963cbf1..1579950f1 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -19,7 +19,7 @@ function newStrategyPart () { return thisObject - function initialize (pFloatingLayer, pType, callBackFunction) { + function initialize (pFloatingLayer, pType) { floatingLayer = pFloatingLayer switch (pType) { @@ -97,29 +97,21 @@ function newStrategyPart () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.iconOn = new Image() - menuItem.iconOn.onload = onImageLoad function onImageLoad () { menuItem.iconOff = new Image() - menuItem.iconOff.onload = onImageLoad function onImageLoad () { menuItem.canDrawIcon = true } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn - menuItem.icon = menuItem.iconOn // The default value is ON. } - - callBackFunction() } function physicsLoop () { From 6ff2315460338e26ce66b4d1101144a21936a608 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 09:54:50 +0200 Subject: [PATCH 003/143] Polishing Conditions --- FloatingSpace/FloatingObject.js | 4 +- FloatingSpace/StrategyPart.js | 86 ++++++++++++++++++--------------- FloatingSpace/StrategyParts.js | 2 +- 3 files changed, 50 insertions(+), 42 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 1ca828acd..903f05d3d 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -125,8 +125,8 @@ function newFloatingObject () { function onMouseOver () { thisObject.targetRadius = thisObject.rawRadius * 2.5 - thisObject.targetImageSize = thisObject.rawImageSize * 2.5 - thisObject.targetFontSize = thisObject.rawFontSize * 2.5 + thisObject.targetImageSize = thisObject.rawImageSize * 2.0 + thisObject.targetFontSize = thisObject.rawFontSize * 2.0 thisObject.underlayingObject.onMouseOver() } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 1579950f1..123b4f755 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -16,6 +16,8 @@ function newStrategyPart () { let floatingLayer let isMouseOver = false + let image + let imagePath return thisObject @@ -51,11 +53,12 @@ function newStrategyPart () { break } case 'Condition': { + imagePath = 'Images/icons/style-01/brainstorming.png' ballStringMenu = [ { visible: false, imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -64,7 +67,7 @@ function newStrategyPart () { { visible: false, imagePathOn: 'Images/icons/style-01/settings.png', - imagePathOff: 'Images/icons/style-01/settings.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -73,7 +76,7 @@ function newStrategyPart () { { visible: false, imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -82,7 +85,7 @@ function newStrategyPart () { { visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -95,6 +98,20 @@ function newStrategyPart () { } } +/* Load Part Image */ + + if (imagePath !== undefined) { + image = new Image() + image.onload = onImageLoad + + function onImageLoad () { + image.canDrawIcon = true + } + image.src = window.canvasApp.urlPrefix + imagePath + } + +/* Load Menu Images */ + for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] menuItem.iconOn = new Image() @@ -160,8 +177,8 @@ function newStrategyPart () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.currentPosition.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -220,8 +237,6 @@ function newStrategyPart () { y: pFloatingObject.payload.profile.position.y } - point = viewPort.fitIntoVisibleArea(point) - if (pFloatingObject.currentRadius > 1) { /* Target Line */ @@ -249,11 +264,18 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { - if (pFloatingObject.currentRadius > 5) { + let position = { + x: pFloatingObject.currentPosition.x, + y: pFloatingObject.currentPosition.y + } + + let radius = pFloatingObject.currentRadius + + if (radius > 5) { /* Contourn */ /* browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 @@ -261,11 +283,11 @@ function newStrategyPart () { */ } - if (pFloatingObject.currentRadius > 0.5) { + if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -273,7 +295,7 @@ function newStrategyPart () { browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 1 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 1 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' @@ -283,21 +305,9 @@ function newStrategyPart () { /* Image */ - if (pFloatingObject.payload.profile.imageId !== undefined) { - let image = pFloatingObject.payload.profile.botAvatar - - if (image !== null && image !== undefined) { - browserCanvasContext.save() - browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.clip() - browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) - browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.clip() - browserCanvasContext.closePath() - browserCanvasContext.restore() + if (image !== undefined) { + if (image.canDrawIcon === true) { + browserCanvasContext.drawImage(image, position.x - pFloatingObject.currentImageSize / 2, position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) } } @@ -307,18 +317,17 @@ function newStrategyPart () { let menuItem = ballStringMenu[i] if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) - } + let menuPosition = { + x: position.x + radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } - browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) } } /* Label Text */ - if (pFloatingObject.currentRadius > 6) { + if (radius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint @@ -332,8 +341,8 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y - radius - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -345,8 +354,8 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y + radius + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -356,4 +365,3 @@ function newStrategyPart () { } } } - diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 1cef46868..53f50272b 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -136,7 +136,7 @@ function newStrategyParts () { floatingObject.initializeMass(10) floatingObject.initializeRadius(25) - floatingObject.initializeImageSize(40) + floatingObject.initializeImageSize(30) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' From f66867516575fb3a536906559a60b69123450668 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 13:16:21 +0200 Subject: [PATCH 004/143] Menu Labels done --- FloatingSpace/StrategyPart.js | 195 +++++++++++++++++++++--- StrategySpace/StrategyCollectionItem.js | 7 +- 2 files changed, 176 insertions(+), 26 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 123b4f755..a67650352 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -26,36 +26,125 @@ function newStrategyPart () { switch (pType) { case 'Strategy': { + imagePath = 'Images/icons/style-01/quality.png' + ballStringMenu = [ + { + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + label: 'Delete', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }] break } case 'Strategy Entry': { + imagePath = 'Images/icons/style-01/startup.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Strategy Exit': { + imagePath = 'Images/icons/style-01/support.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Trade Entry': { + imagePath = 'Images/icons/style-01/compass.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Trade Exit': { + imagePath = 'Images/icons/style-01/broken-link.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Stop': { + imagePath = 'Images/icons/style-01/pixel.png' + ballStringMenu = [ + { + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Take Profit': { + imagePath = 'Images/icons/style-01/competition.png' + ballStringMenu = [ + { + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Phase': { - break - } - case 'Situation': { - break - } - case 'Condition': { - imagePath = 'Images/icons/style-01/brainstorming.png' + imagePath = 'Images/icons/style-01/placeholder.png' ballStringMenu = [ { + label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -65,8 +154,9 @@ function newStrategyPart () { angle: 60 }, { + label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/settings.png', + imagePathOn: 'Images/icons/style-01/attractive.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, @@ -74,22 +164,64 @@ function newStrategyPart () { angle: 20 * 1 }, { - visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { + label: 'Delete', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -60 + angle: -20 + }] + break + } + case 'Situation': { + imagePath = 'Images/icons/style-01/attractive.png' + ballStringMenu = [ + { + label: 'Add Condition', + visible: false, + imagePathOn: 'Images/icons/style-01/testing.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + label: 'Delete', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }] + break + } + case 'Condition': { + imagePath = 'Images/icons/style-01/testing.png' + ballStringMenu = [ + { + label: 'Edit Code', + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + label: 'Delete', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 }] break } @@ -227,8 +359,10 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y + if (isMouseOver === false) { + pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y + } /* Here I continue painting the background */ @@ -322,12 +456,30 @@ function newStrategyPart () { y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + + /* Menu Label */ + + let labelPoint + let fontSize = 10 + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + if (menuItem.label !== undefined && menuItem.currentRadius >= menuItem.targetRadius) { + labelPoint = { + x: menuPosition.x + menuItem.currentRadius + 10, + y: menuPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(menuItem.label, labelPoint.x, labelPoint.y) + } } } /* Label Text */ - if (radius > 6) { + if (radius > 6 && isMouseOver === true) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint @@ -365,3 +517,4 @@ function newStrategyPart () { } } } + diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 8add4cea7..ac8afe798 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -73,8 +73,6 @@ function newStrategyCollectionItem () { } payload.profile.downLabel = name - payload.profile.imageId = imageId - payload.profile.botAvatar = 'dont know what this is' payload.parentNode = parentNode node.payload = payload @@ -139,7 +137,7 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -162,7 +160,7 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -380,4 +378,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - From cce96c9a90d9bcf1ffa06e49c290420f044830ca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 13:27:53 +0200 Subject: [PATCH 005/143] Tyding up Floating Space --- FloatingSpace/NoteSets.js | 8 +++++++- FloatingSpace/ProfileBalls.js | 15 +++++---------- FloatingSpace/StrategyPart.js | 8 ++++---- FloatingSpace/StrategyParts.js | 1 + Spaces/FloatingSpace.js | 14 ++++---------- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index a5acfa44f..c10eb6121 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -23,7 +23,8 @@ function newNoteSets () { let thisObject = { createNoteSet: createNoteSet, destroyNoteSet: destroyNoteSet, - initialize: initialize + initialize: initialize, + finalize: finalize } let noteSets = [] @@ -35,6 +36,11 @@ function newNoteSets () { floatingLayer = pFloatingLayer } + function finalize () { + floatingLayer.finalize() + floatingLayer = undefined + } + function createNoteSet (pPayload, pEventHandler, callBackFunction) { try { /* diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 627bb7fe8..136e6d9be 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -25,20 +25,15 @@ function newProfileBalls () { return thisObject - function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - floatingLayer.finalize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } - } - function initialize (pFloatingLayer) { floatingLayer = pFloatingLayer } + function finalize () { + floatingLayer.finalize() + floatingLayer = undefined + } + function createNewProfileBall (pPayload, callBackFunction) { let floatingObject = newFloatingObject() floatingObject.initialize('Profile Ball', '', floatingLayer, onInitialized) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index a67650352..12842d9ba 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -39,7 +39,7 @@ function newStrategyPart () { angle: 60 }, { - label: 'Delete', + label: 'Delete This Strategy', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -164,7 +164,7 @@ function newStrategyPart () { angle: 20 * 1 }, { - label: 'Delete', + label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -189,7 +189,7 @@ function newStrategyPart () { angle: 60 }, { - label: 'Delete', + label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -214,7 +214,7 @@ function newStrategyPart () { angle: 60 }, { - label: 'Delete', + label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 53f50272b..da2a6bb88 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -26,6 +26,7 @@ function newStrategyParts () { function finalize () { floatingLayer.finalize() + floatingLayer = undefined } function initialize (pFloatingLayer) { diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index e7f6e494d..810ca77b6 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -1,7 +1,6 @@  function newFloatingSpace () { const MODULE_NAME = 'Floating Space' - const INFO_LOG = false const ERROR_LOG = true /* The Floating Space is the place where floating elements like floatingObjects, live and are rendered. @@ -20,15 +19,10 @@ function newFloatingSpace () { return thisObject function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - thisObject.floatingLayer.finalize() - thisObject.profileBalls.finalize() - thisObject.strategyParts.finalize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } + thisObject.floatingLayer.finalize() + thisObject.profileBalls.finalize() + thisObject.strategyParts.finalize() + thisObject.noteSets.finalize() } function initialize (callBackFunction) { From 23f8f4b99a1333c30fe3b4c2503daa46b64a3aad Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 13:56:10 +0200 Subject: [PATCH 006/143] Improvements at Frame --- FloatingSpace/FloatingLayer.js | 2 - Frame.js | 207 +++++++++++++++++---------------- 2 files changed, 105 insertions(+), 104 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 01ba5ab27..a541d5dca 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -900,8 +900,6 @@ function newFloatingLayer () { function isInside (x, y) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] isInside -> Entering function.') } - /* This function detects weather the point x,y is inside any of the floatingObjects. */ for (var i = 0; i < visibleFloatingObjects.length; i++) { diff --git a/Frame.js b/Frame.js index 405d5213b..0fba2522b 100644 --- a/Frame.js +++ b/Frame.js @@ -3,7 +3,8 @@ function newFrame () { const PANEL_CORNERS_RADIOUS = 5 const TITLE_BAR_HEIGHT = 15 // this must be grater than radius - let frame = { + let thisObject = { + type: 'Rectangle', containerName: '', // This is for debugging purposes only. parentFrame: undefined, // Here we store the parent cointainer zoom object. width: browserCanvas.width, @@ -22,19 +23,21 @@ function newFrame () { initialize: initialize } - return frame + return thisObject - function initialize () { - var position = { + function initialize (pType) { + if (pType !== undefined) { thisObject.type = pType } + + let position = { x: 0, y: 0 } - this.position = position + thisObject.position = position } function getBodyHeight () { - return frame.height - TITLE_BAR_HEIGHT + return thisObject.height - TITLE_BAR_HEIGHT } function isInViewPort () { @@ -44,14 +47,14 @@ function newFrame () { } point3 = { - x: frame.width, - y: frame.height + x: thisObject.width, + y: thisObject.height } /* Now the transformations. */ - point1 = transformThisPoint(point1, frame.container) - point3 = transformThisPoint(point3, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point3 = transformThisPoint(point3, thisObject.container) if (point1.x < viewPort.visibleArea.topRight.x && point1.y < viewPort.visibleArea.bottomRight.y && point3.x > viewPort.visibleArea.bottomLeft.x && point3.y > viewPort.visibleArea.topLeft.y) { return true @@ -63,16 +66,16 @@ function newFrame () { function fitIntoFrame (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - if (point.x > frame.width) { - point.x = frame.width + if (point.x > thisObject.width) { + point.x = thisObject.width } if (point.x < 0) { point.x = 0 } - if (point.y > frame.height) { - point.y = frame.height + if (point.y > thisObject.height) { + point.y = thisObject.height } if (point.y < 0) { @@ -83,23 +86,23 @@ function newFrame () { } function frameThisPoint (point) { - if (this.parentFrame !== undefined) { - point = this.parentFrame.frameThisPoint(point) + if (thisObject.parentFrame !== undefined) { + point = thisObject.parentFrame.frameThisPoint(point) } - point.x = point.x + frame.position.x - point.y = point.y + frame.position.y + point.x = point.x + thisObject.position.x + point.y = point.y + thisObject.position.y return point } function unframeThisPoint (point) { - if (this.parentFrame !== undefined) { - point = this.parentFrame.unframeThisPoint(point) + if (thisObject.parentFrame !== undefined) { + point = thisObject.parentFrame.unframeThisPoint(point) } - point.x = point.x - this.position.x - point.y = point.y - this.position.y + point.x = point.x - thisObject.position.x + point.y = point.y - thisObject.position.y return point } @@ -113,34 +116,34 @@ function newFrame () { */ point1 = { - x: this.position.x, - y: this.position.y + x: thisObject.position.x, + y: thisObject.position.y } point2 = { - x: this.position.x + this.width, - y: this.position.y + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y } point3 = { - x: this.position.x + this.width, - y: this.position.y + this.height + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y + thisObject.height } point4 = { - x: this.position.x, - y: this.position.y + this.height + x: thisObject.position.x, + y: thisObject.position.y + thisObject.height } /* Now the transformations. */ - if (this.parentFrame !== undefined) { + if (thisObject.parentFrame !== undefined) { // If there is not a parent then there is no point to check bounderies. - point1 = this.parentFrame.frameThisPoint(point1) - point2 = this.parentFrame.frameThisPoint(point2) - point3 = this.parentFrame.frameThisPoint(point3) - point4 = this.parentFrame.frameThisPoint(point4) + point1 = thisObject.parentFrame.frameThisPoint(point1) + point2 = thisObject.parentFrame.frameThisPoint(point2) + point3 = thisObject.parentFrame.frameThisPoint(point3) + point4 = thisObject.parentFrame.frameThisPoint(point4) /* We apply the temporary displacement. */ @@ -151,24 +154,24 @@ function newFrame () { /* We add the actual displacement. */ - point1 = this.container.displacement.displaceThisPoint(point1) - point2 = this.container.displacement.displaceThisPoint(point2) - point3 = this.container.displacement.displaceThisPoint(point3) - point4 = this.container.displacement.displaceThisPoint(point4) + point1 = thisObject.container.displacement.displaceThisPoint(point1) + point2 = thisObject.container.displacement.displaceThisPoint(point2) + point3 = thisObject.container.displacement.displaceThisPoint(point3) + point4 = thisObject.container.displacement.displaceThisPoint(point4) - if (this.parentFrame.isThisPointHere(point1) === false) { + if (thisObject.parentFrame.isThisPointHere(point1) === false) { return false } - if (this.parentFrame.isThisPointHere(point2) === false) { + if (thisObject.parentFrame.isThisPointHere(point2) === false) { return false } - if (this.parentFrame.isThisPointHere(point3) === false) { + if (thisObject.parentFrame.isThisPointHere(point3) === false) { return false } - if (this.parentFrame.isThisPointHere(point4) === false) { + if (thisObject.parentFrame.isThisPointHere(point4) === false) { return false } } @@ -178,41 +181,41 @@ function newFrame () { function canYouZoomHere (tempZoom) { point1 = { - x: this.position.x, - y: this.position.y + x: thisObject.position.x, + y: thisObject.position.y } point2 = { - x: this.position.x + this.width, - y: this.position.y + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y } point3 = { - x: this.position.x + this.width, - y: this.position.y + this.height + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y + thisObject.height } point4 = { - x: this.position.x, - y: this.position.y + this.height + x: thisObject.position.x, + y: thisObject.position.y + thisObject.height } /* Now the transformations. */ - if (this.parentFrame !== undefined) { + if (thisObject.parentFrame !== undefined) { // If there is not a parent then there is no point to check bounderies. - point1 = this.parentFrame.frameThisPoint(point1) - point2 = this.parentFrame.frameThisPoint(point2) - point3 = this.parentFrame.frameThisPoint(point3) - point4 = this.parentFrame.frameThisPoint(point4) + point1 = thisObject.parentFrame.frameThisPoint(point1) + point2 = thisObject.parentFrame.frameThisPoint(point2) + point3 = thisObject.parentFrame.frameThisPoint(point3) + point4 = thisObject.parentFrame.frameThisPoint(point4) /* We add the actual displacement. */ - point1 = this.container.displacement.displaceThisPoint(point1) - point2 = this.container.displacement.displaceThisPoint(point2) - point3 = this.container.displacement.displaceThisPoint(point3) - point4 = this.container.displacement.displaceThisPoint(point4) + point1 = thisObject.container.displacement.displaceThisPoint(point1) + point2 = thisObject.container.displacement.displaceThisPoint(point2) + point3 = thisObject.container.displacement.displaceThisPoint(point3) + point4 = thisObject.container.displacement.displaceThisPoint(point4) /* We temp zoom. */ @@ -221,19 +224,19 @@ function newFrame () { point3 = tempZoom.zoomThisPoint(point3) point4 = tempZoom.zoomThisPoint(point4) - if (this.parentFrame.isThisPointHere(point1) === false) { + if (thisObject.parentFrame.isThisPointHere(point1) === false) { return false } - if (this.parentFrame.isThisPointHere(point2) === false) { + if (thisObject.parentFrame.isThisPointHere(point2) === false) { return false } - if (this.parentFrame.isThisPointHere(point3) === false) { + if (thisObject.parentFrame.isThisPointHere(point3) === false) { return false } - if (this.parentFrame.isThisPointHere(point4) === false) { + if (thisObject.parentFrame.isThisPointHere(point4) === false) { return false } } @@ -246,7 +249,7 @@ function newFrame () { /* We need not to modify the point received, so me make a copy of it. */ - var checkPoint = { + let checkPoint = { x: point.x, y: point.y } @@ -255,16 +258,16 @@ function newFrame () { in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ if (dontTransform === false || dontTransform === undefined) { if (outsideViewPort === true) { - checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) - checkPoint = this.container.frame.unframeThisPoint(checkPoint) + checkPoint = thisObject.container.displacement.undisplaceThisPoint(checkPoint) + checkPoint = thisObject.container.frame.unframeThisPoint(checkPoint) } else { - checkPoint = unTransformThisPoint(checkPoint, frame.container) + checkPoint = unTransformThisPoint(checkPoint, thisObject.container) } } /* Now we check if the resulting point is whin the current Frame. */ - if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > frame.width || checkPoint.y > frame.height) { + if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { /* The point received is not in this frame */ return false @@ -294,7 +297,7 @@ function newFrame () { cornerRadious: 5, lineWidth: 0.1, opacity: 0.75, - container: frame.container, + container: thisObject.container, borderColor: UI_COLOR.DARK, backgroundColor: UI_COLOR.WHITE } @@ -307,7 +310,7 @@ function newFrame () { } titleBarPoint2 = { - x: frame.width, + x: thisObject.width, y: TITLE_BAR_HEIGHT } @@ -342,17 +345,17 @@ function newFrame () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - let label = frame.containerName + let label = thisObject.containerName let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2 labelPoint = { - x: frame.width / 2 - xOffset, + x: thisObject.width / 2 - xOffset, y: TITLE_BAR_HEIGHT - yOffset } - labelPoint = frame.frameThisPoint(labelPoint) + labelPoint = thisObject.frameThisPoint(labelPoint) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -372,26 +375,26 @@ function newFrame () { } point2 = { - x: frame.width, + x: thisObject.width, y: 0 } point3 = { - x: frame.width, - y: frame.height + x: thisObject.width, + y: thisObject.height } point4 = { x: 0, - y: frame.height + y: thisObject.height } /* Now the transformations. */ - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point2 = transformThisPoint(point2, thisObject.container) + point3 = transformThisPoint(point3, thisObject.container) + point4 = transformThisPoint(point4, thisObject.container) /* Lets start the drawing. */ @@ -414,41 +417,41 @@ function newFrame () { if (smallLines === true) { /* Small Lines */ - var step = frame.width / 100 + let step = thisObject.width / 100 browserCanvasContext.beginPath() - for (var i = 0; i < frame.width; i = i + step) { - for (var j = 0; j < frame.height; j = j + step) { + for (let i = 0; i < thisObject.width; i = i + step) { + for (let j = 0; j < thisObject.height; j = j + step) { let point1 = { x: 0, y: j } let point2 = { - x: frame.width, + x: thisObject.width, y: j } - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point2 = transformThisPoint(point2, thisObject.container) browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) } let point3 = { - x: frame.width, - y: frame.height + x: thisObject.width, + y: thisObject.height } let point4 = { x: 0, - y: frame.height + y: thisObject.height } - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) + point3 = transformThisPoint(point3, thisObject.container) + point4 = transformThisPoint(point4, thisObject.container) browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) @@ -461,24 +464,24 @@ function newFrame () { /* Main Lines */ - var step = frame.width / 20 + let step = thisObject.width / 20 browserCanvasContext.beginPath() - for (var i = 0; i < frame.width; i = i + step) { - for (var j = 0; j < frame.height; j = j + step) { + for (let i = 0; i < thisObject.width; i = i + step) { + for (let j = 0; j < thisObject.height; j = j + step) { let point1 = { x: 0, y: j } let point2 = { - x: frame.width, + x: thisObject.width, y: j } - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point2 = transformThisPoint(point2, thisObject.container) browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -491,11 +494,11 @@ function newFrame () { let point4 = { x: i, - y: frame.height + y: thisObject.height } - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) + point3 = transformThisPoint(point3, thisObject.container) + point4 = transformThisPoint(point4, thisObject.container) browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) From 7f432a6686954af9f35c779df4affc79413930d2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 14:04:34 +0200 Subject: [PATCH 007/143] Possible Circular Frames --- Frame.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/Frame.js b/Frame.js index 0fba2522b..acc87a992 100644 --- a/Frame.js +++ b/Frame.js @@ -9,6 +9,7 @@ function newFrame () { parentFrame: undefined, // Here we store the parent cointainer zoom object. width: browserCanvas.width, height: browserCanvas.height, + radius: 0, position: undefined, getBodyHeight: getBodyHeight, draw: draw, @@ -265,16 +266,24 @@ function newFrame () { } } - /* Now we check if the resulting point is whin the current Frame. */ + /* Now we check if the resulting point is whin the current Frame. */ - if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { - /* The point received is not in this frame */ + if (thisObject.type === 'Circle') { + let distance = Math.sqrt(Math.pow(thisObject.position.x - point.x, 2) + Math.pow(thisObject.position.y - point.y, 2)) - return false - } else { - /* The point is within this frame. */ + if (distance < thisObject.radius) { + return true + } else { + return false + } + } - return true + if (thisObject.type === 'Rectangle') { + if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { + return false + } else { + return true + } } } From ac51249195009d348fd38643b1fe9a9bb0bfeacd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 14:14:56 +0200 Subject: [PATCH 008/143] Cleaning Frame unused code --- Frame.js | 91 ++------------------------------------------------------ 1 file changed, 2 insertions(+), 89 deletions(-) diff --git a/Frame.js b/Frame.js index acc87a992..2fd4391da 100644 --- a/Frame.js +++ b/Frame.js @@ -16,11 +16,9 @@ function newFrame () { container: undefined, frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system. unframeThisPoint: unframeThisPoint, - fitIntoFrame: fitIntoFrame, isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. isInViewPort: isInViewPort, canYouMoveHere: canYouMoveHere, - canYouZoomHere: canYouZoomHere, initialize: initialize } @@ -42,6 +40,8 @@ function newFrame () { } function isInViewPort () { + /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the viewPort */ + point1 = { x: 0, y: 0 @@ -64,28 +64,6 @@ function newFrame () { } } - function fitIntoFrame (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - - if (point.x > thisObject.width) { - point.x = thisObject.width - } - - if (point.x < 0) { - point.x = 0 - } - - if (point.y > thisObject.height) { - point.y = thisObject.height - } - - if (point.y < 0) { - point.y = 0 - } - - return point - } - function frameThisPoint (point) { if (thisObject.parentFrame !== undefined) { point = thisObject.parentFrame.frameThisPoint(point) @@ -180,71 +158,6 @@ function newFrame () { return true } - function canYouZoomHere (tempZoom) { - point1 = { - x: thisObject.position.x, - y: thisObject.position.y - } - - point2 = { - x: thisObject.position.x + thisObject.width, - y: thisObject.position.y - } - - point3 = { - x: thisObject.position.x + thisObject.width, - y: thisObject.position.y + thisObject.height - } - - point4 = { - x: thisObject.position.x, - y: thisObject.position.y + thisObject.height - } - - /* Now the transformations. */ - - if (thisObject.parentFrame !== undefined) { - // If there is not a parent then there is no point to check bounderies. - - point1 = thisObject.parentFrame.frameThisPoint(point1) - point2 = thisObject.parentFrame.frameThisPoint(point2) - point3 = thisObject.parentFrame.frameThisPoint(point3) - point4 = thisObject.parentFrame.frameThisPoint(point4) - - /* We add the actual displacement. */ - - point1 = thisObject.container.displacement.displaceThisPoint(point1) - point2 = thisObject.container.displacement.displaceThisPoint(point2) - point3 = thisObject.container.displacement.displaceThisPoint(point3) - point4 = thisObject.container.displacement.displaceThisPoint(point4) - - /* We temp zoom. */ - - point1 = tempZoom.zoomThisPoint(point1) - point2 = tempZoom.zoomThisPoint(point2) - point3 = tempZoom.zoomThisPoint(point3) - point4 = tempZoom.zoomThisPoint(point4) - - if (thisObject.parentFrame.isThisPointHere(point1) === false) { - return false - } - - if (thisObject.parentFrame.isThisPointHere(point2) === false) { - return false - } - - if (thisObject.parentFrame.isThisPointHere(point3) === false) { - return false - } - - if (thisObject.parentFrame.isThisPointHere(point4) === false) { - return false - } - } - - return true - } - function isThisPointHere (point, outsideViewPort, dontTransform) { // The second parameter is usefull when you want to check a point that you already know is outside the viewport. From 7115daf686bd2f52e4ebfd78493aa67e52001377 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 17:22:26 +0200 Subject: [PATCH 009/143] NUmerals --- StrategySpace/StrategyCollectionItem.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index ac8afe798..17023b061 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -96,33 +96,33 @@ function newStrategyCollectionItem () { createPart('Strategy Entry', '', strategy.entryPoint, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } createPart('Strategy Exit', '', strategy.exitPoint, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } createPart('Trade Entry', '', strategy.sellPoint, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } @@ -137,15 +137,15 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } } @@ -160,15 +160,15 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } } From 276db501b64864d7b3c2540294e1a20de55a04ce Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:06:21 +0200 Subject: [PATCH 010/143] getContainer added across floating space --- Container.js | 4 ++-- FloatingSpace/FloatingLayer.js | 13 +++++++++++++ FloatingSpace/FloatingObject.js | 25 ++++++++++++++++++++++++- FloatingSpace/Note.js | 25 +++++++++++++++++++++++-- FloatingSpace/ProfileBall.js | 25 +++++++++++++++++++++++-- FloatingSpace/StrategyPart.js | 25 +++++++++++++++++++++++-- Spaces/FloatingSpace.js | 10 ++++++++++ 7 files changed, 118 insertions(+), 9 deletions(-) diff --git a/Container.js b/Container.js index cacb0bec1..5d743b388 100644 --- a/Container.js +++ b/Container.js @@ -33,11 +33,11 @@ function newContainer () { } } - function initialize (pName) { + function initialize (pName, pType) { thisObject.name = pName thisObject.frame = newFrame() - thisObject.frame.initialize() + thisObject.frame.initialize(pType) thisObject.frame.containerName = pName thisObject.frame.container = thisObject diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index a541d5dca..c2a07b07d 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -30,6 +30,7 @@ function newFloatingLayer () { isInside: isInside, isInsideFloatingObject: isInsideFloatingObject, changeTargetRepulsion: changeTargetRepulsion, + getContainer: getContainer, initialize: initialize, finalize: finalize } @@ -85,6 +86,18 @@ function newFloatingLayer () { /* We dont need to initialize anything right now. */ } + function getContainer (point) { + let container + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + container = floatingObject.getContainer(point) + if (container !== undefined) { return container } + } + + return container + } + function addFloatingObject (pFloatingObject, callBackFunction) { /* As you can see here, even though the floating objects are created outside this layer, its creator it is not supossed to keep diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 903f05d3d..357547743 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -54,11 +54,21 @@ function newFloatingObject () { linkedObject: undefined, // This is a reference to the object that this floating object is representing. linkedObjectType: '', // Since there might be floating objects for different types of objects, here we store the type of object we are linking to. - container: undefined, // This is a pointer to the object where the floating object belongs to. + getContainer: getContainer, + container: undefined, initialize: initialize } + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.eventHandler = newEventHandler() return thisObject @@ -110,6 +120,19 @@ function newFloatingObject () { } } + function getContainer (point) { + let container + + container = thisObject.underlayingObject.getContainer(point) + if (container !== undefined) { return container } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop (callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 26e76668d..3a1aa4ead 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -1,23 +1,44 @@  function newNote () { - let thisObject = { + const MODULE_NAME = 'Note' + let thisObject = { + container: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, + getContainer: getContainer, initialize: initialize - } + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + return thisObject function initialize () { } + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop () { } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 2e0c52f8f..3a2c6c22e 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -1,17 +1,28 @@ function newProfileBall () { - let thisObject = { + const MODULE_NAME = 'Profile Ball' + let thisObject = { + container: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, + getContainer: getContainer, initialize: initialize - } + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + let ballStringMenu = [ { visible: false, @@ -79,6 +90,16 @@ function newProfileBall () { } } + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop () { // The menuItems also have a target. diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 12842d9ba..44a20db78 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -1,19 +1,30 @@ function newStrategyPart () { + const MODULE_NAME = 'Strategy Part' + let thisObject = { type: undefined, + container: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, + getContainer: getContainer, initialize: initialize - } - let ballStringMenu = [] + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + let ballStringMenu = [] let floatingLayer let isMouseOver = false let image @@ -263,6 +274,16 @@ function newStrategyPart () { } } + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop () { // The menuItems also have a target. diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 810ca77b6..632666043 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -12,6 +12,7 @@ function newFloatingSpace () { profileBalls: undefined, strategyParts: undefined, noteSets: undefined, + getContainer: getContainer, initialize: initialize, finalize: finalize } @@ -38,5 +39,14 @@ function newFloatingSpace () { thisObject.strategyParts = newStrategyParts() thisObject.strategyParts.initialize(thisObject.floatingLayer) } + + function getContainer (point) { + let container + + container = thisObject.floatingLayer.getContainer(point) + if (container !== undefined) { return container } + + return container + } } From df353348bb0f1879270335048bb65dc9eb85ea13 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:23:09 +0200 Subject: [PATCH 011/143] Current Position from the Frame --- Canvas.js | 4 +-- FloatingSpace/FloatingLayer.js | 52 ++++++++++++++++----------------- FloatingSpace/FloatingObject.js | 6 ++-- FloatingSpace/Note.js | 14 ++++----- FloatingSpace/ProfileBall.js | 28 +++++++++--------- FloatingSpace/StrategyPart.js | 15 +++++----- 6 files changed, 58 insertions(+), 61 deletions(-) diff --git a/Canvas.js b/Canvas.js index 8a6f1eab3..b05bc1674 100644 --- a/Canvas.js +++ b/Canvas.js @@ -687,8 +687,8 @@ function newCanvas () { if (floatingObjectDragStarted) { let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged) - floatingObject.currentPosition.x = dragVector.upX - floatingObject.currentPosition.y = dragVector.upY + floatingObject.container.frame.position.x = dragVector.upX + floatingObject.container.frame.position.y = dragVector.upY } if (containerDragStarted || viewPortBeingDragged) { diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index c2a07b07d..0d2c63ecc 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -341,8 +341,8 @@ function newFloatingLayer () { if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Change position based on speed.') } - floatingObject.currentPosition.x = floatingObject.currentPosition.x + floatingObject.currentSpeed.x - floatingObject.currentPosition.y = floatingObject.currentPosition.y + floatingObject.currentSpeed.y + floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x + floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Apply some friction to desaccelerate.') } @@ -379,13 +379,13 @@ function newFloatingLayer () { } } - if (floatingObject.currentPosition.x < payload.position.x) { + if (floatingObject.container.frame.position.x < payload.position.x) { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + 0.005 } else { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x - 0.005 } - if (floatingObject.currentPosition.y < payload.position.y) { + if (floatingObject.container.frame.position.y < payload.position.y) { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + 0.005 } else { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 @@ -676,7 +676,7 @@ function newFloatingLayer () { const coulomb = 0.00001 const minForce = 0.01 - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.currentPosition.x, 2) + Math.pow(payload.position.y - floatingObject.currentPosition.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * d * d / floatingObject.currentMass // In this case the mass of the floatingObject affects the gravity force that it receives, that gives priority to target position to bigger floatingObjects. @@ -685,8 +685,8 @@ function newFloatingLayer () { } var pos1 = { - x: floatingObject.currentPosition.x, - y: floatingObject.currentPosition.y + x: floatingObject.container.frame.position.x, + y: floatingObject.container.frame.position.y } var pos2 = { @@ -736,7 +736,7 @@ function newFloatingLayer () { var floatingObject2 = visibleFloatingObjects[i] // So, for each floatingObject... - var d = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * floatingObject2.currentMass / (d * d) // ... and with it the repulsion force. @@ -747,13 +747,13 @@ function newFloatingLayer () { } var pos1 = { - x: floatingObject1.currentPosition.x, - y: floatingObject1.currentPosition.y + x: floatingObject1.container.frame.position.x, + y: floatingObject1.container.frame.position.y } var pos2 = { - x: floatingObject2.currentPosition.x, - y: floatingObject2.currentPosition.y + x: floatingObject2.container.frame.position.x, + y: floatingObject2.container.frame.position.y } var posDiff = { // Next we need the vector resulting from the 2 positions. @@ -820,7 +820,7 @@ function newFloatingLayer () { } } - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.currentPosition.x, 2) + Math.pow(payload.position.y - floatingObject1.currentPosition.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * floatingObject2.currentMass / (d * d) // ... and with it the repulsion force. @@ -831,8 +831,8 @@ function newFloatingLayer () { } var pos1 = { - x: floatingObject1.currentPosition.x, - y: floatingObject1.currentPosition.y + x: floatingObject1.container.frame.position.x, + y: floatingObject1.container.frame.position.y } var pos2 = { @@ -894,7 +894,7 @@ function newFloatingLayer () { var r1 = floatingObject1.currentRadius var r2 = floatingObject2.currentRadius - var distance = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2)) + var distance = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) if (distance > (r1 + r2)) { // No solutions, the circles are too far apart. @@ -917,7 +917,7 @@ function newFloatingLayer () { for (var i = 0; i < visibleFloatingObjects.length; i++) { var floatingObject = visibleFloatingObjects[i] - var distance = Math.sqrt(Math.pow(floatingObject.currentPosition.x - x, 2) + Math.pow(floatingObject.currentPosition.y - y, 2)) + var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) if (distance < floatingObject.currentRadius) { return i @@ -936,7 +936,7 @@ function newFloatingLayer () { /* This function detects weather the point x,y is inside one particular floatingObjects. */ var floatingObject = visibleFloatingObjects[floatingObjectIndex] - var distance = Math.sqrt(Math.pow(floatingObject.currentPosition.x - x, 2) + Math.pow(floatingObject.currentPosition.y - y, 2)) + var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) if (distance < floatingObject.currentRadius) { return true @@ -964,7 +964,7 @@ function newFloatingLayer () { /* This function changes speed and position of floatingObjects that are in collision */ - var collisionision_angle = Math.atan2((floatingObject2.currentPosition.y - floatingObject1.currentPosition.y), (floatingObject2.currentPosition.x - floatingObject1.currentPosition.x)) + var collisionision_angle = Math.atan2((floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y), (floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x)) var speed1 = Math.sqrt(floatingObject1.currentSpeed.x * floatingObject1.currentSpeed.x + floatingObject1.currentSpeed.y * floatingObject1.currentSpeed.y) // Magnitude of Speed Vector for floatingObject 1 var speed2 = Math.sqrt(floatingObject2.currentSpeed.x * floatingObject2.currentSpeed.x + floatingObject2.currentSpeed.y * floatingObject2.currentSpeed.y) // Magnitude of Speed Vector for floatingObject 2 @@ -992,13 +992,13 @@ function newFloatingLayer () { floatingObject2.currentSpeed.y = sinAngle * final_xspeed_2 + cosAngle * final_yspeed_2 var pos1 = { - x: floatingObject1.currentPosition.x, - y: floatingObject1.currentPosition.y + x: floatingObject1.container.frame.position.x, + y: floatingObject1.container.frame.position.y } var pos2 = { - x: floatingObject2.currentPosition.x, - y: floatingObject2.currentPosition.y + x: floatingObject2.container.frame.position.x, + y: floatingObject2.container.frame.position.y } // get the mtd @@ -1007,7 +1007,7 @@ function newFloatingLayer () { y: pos1.y - pos2.y } - var d = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2)) + var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) // minimum translation distance to push floatingObjects apart after intersecting var scalar = (((floatingObject1.currentRadius + floatingObject2.currentRadius) - d) / d) @@ -1029,8 +1029,8 @@ function newFloatingLayer () { pos2.x = pos2.x - minTD.x * (im2 / (im1 + im2)) pos2.y = pos2.y - minTD.y * (im2 / (im1 + im2)) - floatingObject1.currentPosition = pos1 - floatingObject2.currentPosition = pos2 + floatingObject1.container.frame.position = pos1 + floatingObject2.container.frame.position = pos2 } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err.message = ' + err.message) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 357547743..bc023a4a4 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -26,7 +26,6 @@ function newFloatingObject () { imageId: undefined, - currentPosition: 0, // Current x,y position of the floating object at the floating object's layer, where there is no displacement or zoom. This position is always changing towards the target position. currentSpeed: 0, // This is the current speed of the floating object. currentRadius: 0, // This is the current radius of the floating object, including its zoom applied. currentMass: 0, // This is the current mass of the floating object, including its zoom applied. @@ -218,12 +217,12 @@ function newFloatingObject () { } function radomizeCurrentPosition (arroundPoint) { - var position = { + let position = { x: Math.floor((Math.random() * (200) - 100)) + arroundPoint.x, y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y } - thisObject.currentPosition = position + thisObject.container.frame.position = position } function radomizeCurrentSpeed () { @@ -263,4 +262,3 @@ function newFloatingObject () { } } - diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 3a1aa4ead..24fd8fbb5 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -67,7 +67,7 @@ function newNote () { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([4, 2]) @@ -102,8 +102,8 @@ function newNote () { let borderPoint4 let intialDisplace = { - x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2, - y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2 + x: pFloatingObject.container.frame.position.x - BUBBLE_WIDTH / 2, + y: pFloatingObject.container.frame.position.y - BUBBLE_HEIGHT / 2 } if (pFloatingObject.currentRadius > 5) { @@ -185,8 +185,8 @@ function newNote () { /* Image */ let imagePosition = { - x: pFloatingObject.currentPosition.x, - y: pFloatingObject.currentPosition.y + BUBBLE_HEIGHT / 2 + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y + BUBBLE_HEIGHT / 2 } if (pFloatingObject.payloadImageId !== undefined) { @@ -304,8 +304,8 @@ function newNote () { let labelRow = labelRows[i] let startingPosition = { - x: pFloatingObject.currentPosition.x, - y: pFloatingObject.currentPosition.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10) + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10) } labelPoint = { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 3a2c6c22e..b3c387050 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -142,8 +142,8 @@ function newProfileBall () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -198,7 +198,7 @@ function newProfileBall () { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([4, 2]) @@ -225,7 +225,7 @@ function newProfileBall () { /* Contourn */ browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 @@ -246,7 +246,7 @@ function newProfileBall () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -262,12 +262,12 @@ function newProfileBall () { if (image !== null && image !== undefined) { browserCanvasContext.save() browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.clip() - browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) + browserCanvasContext.drawImage(image, pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) browserCanvasContext.clip() browserCanvasContext.closePath() browserCanvasContext.restore() @@ -281,8 +281,8 @@ function newProfileBall () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -305,8 +305,8 @@ function newProfileBall () { if (label !== undefined) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 + x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -318,8 +318,8 @@ function newProfileBall () { if (label !== undefined) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 + x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.container.frame.position.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 44a20db78..0df9d3cf4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -330,8 +330,8 @@ function newStrategyPart () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -381,8 +381,8 @@ function newStrategyPart () { let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) if (isMouseOver === false) { - pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y + pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y } /* Here I continue painting the background */ @@ -396,7 +396,7 @@ function newStrategyPart () { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([1, 4]) @@ -420,8 +420,8 @@ function newStrategyPart () { function drawForeground (pFloatingObject) { let position = { - x: pFloatingObject.currentPosition.x, - y: pFloatingObject.currentPosition.y + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y } let radius = pFloatingObject.currentRadius @@ -538,4 +538,3 @@ function newStrategyPart () { } } } - From 7cdb22cc1eaeac4a436f4e53d8813abc9be44e26 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:25:12 +0200 Subject: [PATCH 012/143] Just Tyding --- FloatingSpace/FloatingObject.js | 7 +------ FloatingSpace/ProfileBall.js | 8 -------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index bc023a4a4..14e4594b7 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -80,12 +80,7 @@ function newFloatingObject () { case 'Profile Ball': { thisObject.underlayingObject = newProfileBall() - thisObject.underlayingObject.initialize(onInitialized) - - function onInitialized (err) { - - } - + thisObject.underlayingObject.initialize() break } case 'Note': { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index b3c387050..eaead239d 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -67,25 +67,17 @@ function newProfileBall () { function initialize () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.iconOn = new Image() - menuItem.iconOn.onload = onImageLoad - function onImageLoad () { menuItem.iconOff = new Image() - menuItem.iconOff.onload = onImageLoad - function onImageLoad () { menuItem.canDrawIcon = true } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn - menuItem.icon = menuItem.iconOn // The default value is ON. } } From b56f1bba59a898c9d539aa0126a9811f22726fdc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:32:52 +0200 Subject: [PATCH 013/143] Event Handler from the Container --- Canvas.js | 4 ++-- FloatingSpace/FloatingObject.js | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/Canvas.js b/Canvas.js index b05bc1674..319b77274 100644 --- a/Canvas.js +++ b/Canvas.js @@ -438,7 +438,7 @@ function newCanvas () { if (floatingObjectBeingClicked >= 0) { let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.eventHandler.raiseEvent('onMouseClick', point) + floatingObject.container.eventHandler.raiseEvent('onMouseClick', point) return } @@ -588,7 +588,7 @@ function newCanvas () { if (floatingObjectBeingClicked >= 0) { let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.eventHandler.raiseEvent('onMouseOver', point) + floatingObject.container.eventHandler.raiseEvent('onMouseOver', point) return } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 14e4594b7..d135e58d6 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -11,7 +11,6 @@ function newFloatingObject () { let thisObject = { physicsLoop: physicsLoop, - eventHandler: undefined, payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. @@ -68,8 +67,6 @@ function newFloatingObject () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.eventHandler = newEventHandler() - return thisObject function initialize (pType, pSubType, floatingLayer, callBackFunction) { @@ -103,9 +100,9 @@ function newFloatingObject () { thisObject.type = pType - thisObject.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) canvas.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) - thisObject.eventHandler.listenToEvent('onMouseClick', onMouseClick) if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { From 10ca03678cf3f212935e67c20c964327f35df535 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:48:43 +0200 Subject: [PATCH 014/143] Removed events as direct calls --- FloatingSpace/FloatingObject.js | 10 +++++++--- FloatingSpace/Note.js | 12 ++++++------ FloatingSpace/ProfileBall.js | 12 ++++++++---- FloatingSpace/StrategyPart.js | 12 ++++++++---- 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index d135e58d6..56083e009 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -142,7 +142,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.onMouseOver() + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver') } function onMouseNotOver () { @@ -150,11 +150,15 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.onMouseNotOver() + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver') } function onMouseClick (pPoint) { - thisObject.underlayingObject.onMouseClick(pPoint, thisObject) + let event = { + point: pPoint, + parent: thisObject + } + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseClick', event) } function drawBackground () { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 24fd8fbb5..6ffd0c76d 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -5,9 +5,6 @@ function newNote () { let thisObject = { container: undefined, physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -26,7 +23,9 @@ function newNote () { return thisObject function initialize () { - + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -51,8 +50,9 @@ function newNote () { } - function onMouseClick (pPoint, pFloatingObject) { - + function onMouseClick (event) { + pPoint = event.point + pFloatingObject = event.parent } function drawBackground (pFloatingObject) { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index eaead239d..e25b39cc9 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -5,9 +5,6 @@ function newProfileBall () { let thisObject = { container: undefined, physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -80,6 +77,10 @@ function newProfileBall () { menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn menuItem.icon = menuItem.iconOn // The default value is ON. } + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -124,9 +125,12 @@ function newProfileBall () { } } - function onMouseClick (pPoint, pFloatingObject) { + function onMouseClick (event) { /* What we need to do here is to check which menu item was clicked, if any. */ + pPoint = event.point + pFloatingObject = event.parent + let menuItemIndex for (let i = 0; i < ballStringMenu.length; i++) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 0df9d3cf4..d990a205f 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -6,9 +6,6 @@ function newStrategyPart () { type: undefined, container: undefined, physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -272,6 +269,10 @@ function newStrategyPart () { menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn menuItem.icon = menuItem.iconOn // The default value is ON. } + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -320,9 +321,12 @@ function newStrategyPart () { isMouseOver = false } - function onMouseClick (pPoint, pFloatingObject) { + function onMouseClick (event) { /* What we need to do here is to check which menu item was clicked, if any. */ + pPoint = event.point + pFloatingObject = event.parent + let menuItemIndex for (let i = 0; i < ballStringMenu.length; i++) { From 7f735c1d8ef2a37437b0535258c3b0e88bf3c3ee Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 19:05:04 +0200 Subject: [PATCH 015/143] radius moved to the radius at the frame --- Canvas.js | 9 +++------ FloatingSpace/FloatingLayer.js | 22 +++++++++++----------- FloatingSpace/FloatingObject.js | 3 +-- FloatingSpace/Note.js | 18 +++++++++--------- FloatingSpace/ProfileBall.js | 16 ++++++++-------- FloatingSpace/StrategyPart.js | 10 +++++----- 6 files changed, 37 insertions(+), 41 deletions(-) diff --git a/Canvas.js b/Canvas.js index 319b77274..ab2d9ecd4 100644 --- a/Canvas.js +++ b/Canvas.js @@ -433,13 +433,10 @@ function newCanvas () { } /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) - let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingClicked >= 0) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.container.eventHandler.raiseEvent('onMouseClick', point) - + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) return } diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 0d2c63ecc..55bcd47eb 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -413,11 +413,11 @@ function newFloatingLayer () { // The radius also have a target. - if (Math.abs(floatingObject.currentRadius - floatingObject.targetRadius) >= 1) { - if (floatingObject.currentRadius < floatingObject.targetRadius) { - floatingObject.currentRadius = floatingObject.currentRadius + 0.5 + if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 1) { + if (floatingObject.container.frame.radius < floatingObject.targetRadius) { + floatingObject.container.frame.radius = floatingObject.container.frame.radius + 0.5 } else { - floatingObject.currentRadius = floatingObject.currentRadius - 0.5 + floatingObject.container.frame.radius = floatingObject.container.frame.radius - 0.5 } } @@ -625,10 +625,10 @@ function newFloatingLayer () { for (let i = 0; i < dyingFloatingObjects.length; i++) { let floatingObject = dyingFloatingObjects[i] - if (Math.abs(floatingObject.currentRadius - floatingObject.targetRadius) >= 5) { + if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 5) { let speed = Math.random() - floatingObject.currentRadius = floatingObject.currentRadius - speed * 3 + floatingObject.container.frame.radius = floatingObject.container.frame.radius - speed * 3 } else { /* Here is when the floatingObjects are definetelly killed. */ @@ -891,8 +891,8 @@ function newFloatingLayer () { /* This function detects weather 2 floatingObjects collide with each other. */ - var r1 = floatingObject1.currentRadius - var r2 = floatingObject2.currentRadius + var r1 = floatingObject1.container.frame.radius + var r2 = floatingObject2.container.frame.radius var distance = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) @@ -919,7 +919,7 @@ function newFloatingLayer () { var floatingObject = visibleFloatingObjects[i] var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - if (distance < floatingObject.currentRadius) { + if (distance < floatingObject.container.frame.radius) { return i } } @@ -938,7 +938,7 @@ function newFloatingLayer () { var floatingObject = visibleFloatingObjects[floatingObjectIndex] var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - if (distance < floatingObject.currentRadius) { + if (distance < floatingObject.container.frame.radius) { return true } @@ -1010,7 +1010,7 @@ function newFloatingLayer () { var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) // minimum translation distance to push floatingObjects apart after intersecting - var scalar = (((floatingObject1.currentRadius + floatingObject2.currentRadius) - d) / d) + var scalar = (((floatingObject1.container.frame.radius + floatingObject2.container.frame.radius) - d) / d) var minTD = { x: posDiff.x * scalar, diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 56083e009..85c1e8488 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -26,7 +26,6 @@ function newFloatingObject () { imageId: undefined, currentSpeed: 0, // This is the current speed of the floating object. - currentRadius: 0, // This is the current radius of the floating object, including its zoom applied. currentMass: 0, // This is the current mass of the floating object, including its zoom applied. friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. @@ -187,7 +186,7 @@ function newFloatingObject () { thisObject.rawRadius = radius thisObject.targetRadius = radius - thisObject.currentRadius = radius / 3 + thisObject.container.frame.radius = radius / 3 } function initializeImageSize (suggestedValue) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 6ffd0c76d..3d8e596a0 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -63,7 +63,7 @@ function newNote () { point = viewPort.fitIntoVisibleArea(point) - if (pFloatingObject.currentRadius > 1) { + if (pFloatingObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() @@ -76,7 +76,7 @@ function newNote () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ var radius = 1 @@ -93,8 +93,8 @@ function newNote () { const BUBBLE_CORNERS_RADIOUS = 5 const TITLE_BAR_HEIGHT = 14 - const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 4 - const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 2 + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 4 + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 2 let borderPoint1 let borderPoint2 @@ -106,7 +106,7 @@ function newNote () { y: pFloatingObject.container.frame.position.y - BUBBLE_HEIGHT / 2 } - if (pFloatingObject.currentRadius > 5) { + if (pFloatingObject.container.frame.radius > 5) { /* Rounded Background */ borderPoint1 = { @@ -181,7 +181,7 @@ function newNote () { browserCanvasContext.stroke() } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Image */ let imagePosition = { @@ -208,10 +208,10 @@ function newNote () { /* Labels */ - if (pFloatingObject.currentRadius > 6) { + if (pFloatingObject.container.frame.radius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100 + const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.container.frame.radius / pFloatingObject.targetRadius * 100) / 100 let ALPHA if (pFloatingObject.targetRadius > 0) { @@ -219,7 +219,7 @@ function newNote () { } else { // Object is dying... - ALPHA = Math.trunc((0.5 - (100 - pFloatingObject.currentRadius / 100)) * 100) / 100 + ALPHA = Math.trunc((0.5 - (100 - pFloatingObject.container.frame.radius / 100)) * 100) / 100 if (ALPHA < 0) { ALPHA = 0 } } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index e25b39cc9..07bf74b20 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -190,7 +190,7 @@ function newProfileBall () { point = viewPort.fitIntoVisibleArea(point) - if (pFloatingObject.currentRadius > 1) { + if (pFloatingObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() @@ -203,7 +203,7 @@ function newProfileBall () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ var radius = 1 @@ -217,23 +217,23 @@ function newProfileBall () { } function drawForeground (pFloatingObject) { - if (pFloatingObject.currentRadius > 5) { + if (pFloatingObject.container.frame.radius > 5) { /* Contourn */ browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.container.frame.radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Main FloatingObject */ var alphaA - if (pFloatingObject.currentRadius < 3) { + if (pFloatingObject.container.frame.radius < 3) { alphaA = 1 } else { alphaA = 0.75 @@ -242,7 +242,7 @@ function newProfileBall () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.container.frame.radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -287,7 +287,7 @@ function newProfileBall () { /* Label Text */ - if (pFloatingObject.currentRadius > 6) { + if (pFloatingObject.container.frame.radius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d990a205f..18604c166 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -334,8 +334,8 @@ function newStrategyPart () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.container.frame.position.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.container.frame.position.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -396,7 +396,7 @@ function newStrategyPart () { y: pFloatingObject.payload.profile.position.y } - if (pFloatingObject.currentRadius > 1) { + if (pFloatingObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() @@ -409,7 +409,7 @@ function newStrategyPart () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ var radius = 1 @@ -428,7 +428,7 @@ function newStrategyPart () { y: pFloatingObject.container.frame.position.y } - let radius = pFloatingObject.currentRadius + let radius = pFloatingObject.container.frame.radius if (radius > 5) { /* Contourn */ From 0e24dfbe8b65d30f1233bb6c48e59a4028c31b9e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 19:46:17 +0200 Subject: [PATCH 016/143] Preparing to draw from the Floating Space --- Canvas.js | 3 ++- FloatingSpace/FloatingLayer.js | 4 +++ Spaces/FloatingSpace.js | 33 +++++++++++++++++++++++++ StrategySpace/StrategyCollectionItem.js | 27 +++++--------------- 4 files changed, 45 insertions(+), 22 deletions(-) diff --git a/Canvas.js b/Canvas.js index ab2d9ecd4..e72b0e1f8 100644 --- a/Canvas.js +++ b/Canvas.js @@ -175,7 +175,8 @@ function newCanvas () { animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 55bcd47eb..e0f55859f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -302,6 +302,10 @@ function newFloatingLayer () { } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err.message = ' + err.message) } } + } + + function draw () { + } /******************************************/ diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 632666043..e38c0b7b8 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -12,11 +12,16 @@ function newFloatingSpace () { profileBalls: undefined, strategyParts: undefined, noteSets: undefined, + makeVisible: makeVisible, + makeInvisible: makeInvisible, + draw: draw, getContainer: getContainer, initialize: initialize, finalize: finalize } + let visible = false + return thisObject function finalize () { @@ -40,6 +45,18 @@ function newFloatingSpace () { thisObject.strategyParts.initialize(thisObject.floatingLayer) } + function makeVisible () { + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false + visible = true + } + + function makeInvisible () { + canvas.chartSpace.visible = true + canvas.panelsSpace.visible = true + visible = false + } + function getContainer (point) { let container @@ -48,5 +65,21 @@ function newFloatingSpace () { return container } + + function draw () { + if (visible === true) { + drawBackground() + } + } + + function drawBackground () { + browserCanvasContext.beginPath() + + browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() + } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 17023b061..325433b9f 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -17,7 +17,7 @@ function newStrategyCollectionItem () { thisObject.container.isClickeable = true thisObject.container.isDraggeable = false - let visible = false + let status = 'off' return thisObject @@ -39,16 +39,14 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - if (visible === false) { - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false + if (status === 'off') { + canvas.floatingSpace.makeVisible() generateStrategyParts() - visible = true + status = 'on' } else { - canvas.chartSpace.visible = true - canvas.panelsSpace.visible = true + canvas.floatingSpace.makeInvisible() destroyStrategyParts() - visible = false + status = 'off' } } @@ -260,19 +258,6 @@ function newStrategyCollectionItem () { text() arrow() icon() - floatingBackground() - } - - function floatingBackground () { - if (visible === false) { return } - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' - - browserCanvasContext.closePath() - browserCanvasContext.fill() } function text () { From 65f9772553b0987b46ac2445bf7535801bac73d7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 21:55:52 +0200 Subject: [PATCH 017/143] phisics refactored --- Canvas.js | 2 +- FloatingSpace/FloatingLayer.js | 368 ++++++++++++++++---------------- FloatingSpace/FloatingObject.js | 8 +- Spaces/FloatingSpace.js | 7 + 4 files changed, 196 insertions(+), 189 deletions(-) diff --git a/Canvas.js b/Canvas.js index e72b0e1f8..8624f0b4b 100644 --- a/Canvas.js +++ b/Canvas.js @@ -176,7 +176,7 @@ function newCanvas () { animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index e0f55859f..075e6a536 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -1,6 +1,4 @@ -  -function newFloatingLayer () { - /* +/* This module represent one layer of many possible layers that could be at the Floating Space. Objects in the same layer are subject to the same physics, and by being at the same level, they interact with each other. For example, they can bounce when one hit the other. This module posesses its own physics engine. There are different types of floating objects, but this layer takes care of each of them. @@ -15,6 +13,7 @@ function newFloatingLayer () { 3. Strategy Parts: These are small balls that represent parts of an strategy. */ +function newFloatingLayer () { const MODULE_NAME = 'Floating Layer' const INFO_LOG = false let INTENSIVE_LOG = false @@ -26,10 +25,11 @@ function newFloatingLayer () { addFloatingObject: addFloatingObject, killFloatingObject: killFloatingObject, getFloatingObject: getFloatingObject, - physicsLoop: physicsLoop, + physics: physics, isInside: isInside, isInsideFloatingObject: isInsideFloatingObject, changeTargetRepulsion: changeTargetRepulsion, + draw: draw, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -305,7 +305,175 @@ function newFloatingLayer () { } function draw () { + drawVisibleObjects() + function drawVisibleObjects () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawVisibleObjects -> Entering function.') } + + /* We draw all the visibleFloatingObjects. */ + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawBackground() + } + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] + floatingObject.drawForeground() + } + + makeVisible() + } catch (err) { + if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err.message = ' + err.message) } + } + } + + function makeVisible () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeVisible -> Entering function.') } + + /* Now we check if any of the created FloatingObjects where enabled to run under the Physics Engine. */ + + for (let i = 0; i < invisibleFloatingObjects.length; i++) { + let floatingObject = invisibleFloatingObjects[i] + + let payload = { + position: undefined, + visible: false + } + + switch (floatingObject.type) { + + case 'Profile Ball': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible + break + } + case 'Note': { + if (floatingObject.payload.notes[floatingObject.payloadNoteIndex] !== undefined) { + payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position + payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible + } + break + } + case 'Strategy Part': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible + break + } + default: { + break + } + } + + if (payload.visible === true) { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } + + /* The first time that the floatingObject becomes visible, we need to do this. */ + + floatingObject.radomizeCurrentPosition(payload.position) + floatingObject.radomizeCurrentSpeed() + + visibleFloatingObjects.push(floatingObject) + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to visibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } + + invisibleFloatingObjects.splice(i, 1) // Delete item from array. + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from invisibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } + + return // Only one at the time. + } + } + + makeInvisible() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err.message = ' + err.message) } + } + } + + function makeInvisible () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeInvisible -> Entering function.') } + + /* Finally we check if any of the currently visible floatingObjects has become invisible and must be removed from the Physics Engine. */ + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + + let payload = { + position: undefined, + visible: true + } + + switch (floatingObject.type) { + + case 'Profile Ball': { + payload.visible = floatingObject.payload.profile.visible + break + } + case 'Note': { + payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible + break + } + case 'Strategy Part': { + payload.visible = floatingObject.payload.profile.visible + break + } + default: { + break + } + } + + if (payload.visible === false) { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } + + invisibleFloatingObjects.push(floatingObject) + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to invisibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } + + visibleFloatingObjects.splice(i, 1) // Delete item from array. + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from visibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } + + return // Only one at the time. + } + } + + drawDyingObjects() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err.message = ' + err.message) } + } + } + + function drawDyingObjects () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawDyingObjects -> Entering function.') } + + /* We also draw all the dyingFloatingObjects */ + + for (let i = 0; i < dyingFloatingObjects.length; i++) { + let floatingObject = dyingFloatingObjects[i] + floatingObject.drawBackground() + } + + for (let i = 0; i < dyingFloatingObjects.length; i++) { + let floatingObject = dyingFloatingObjects[dyingFloatingObjects.length - i - 1] + floatingObject.drawForeground() + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err.message = ' + err.message) } + } + } } /******************************************/ @@ -314,7 +482,7 @@ function newFloatingLayer () { /* */ /******************************************/ - function physicsLoop () { + function physics () { /* The Physics engine is hooked at the animation loop, so it executes very very often. According to this Physics engine, each floating object has a position and a speed. In fact, each floating object has two positions at the same time: @@ -330,7 +498,7 @@ function newFloatingLayer () { */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Entering function.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Entering function.') } applyPhysics() @@ -338,22 +506,22 @@ function newFloatingLayer () { /* This function makes all the calculations to apply phisycs on all visible floatingObjects in this layer. */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> applyPhysics -> Entering function.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> applyPhysics -> Entering function.') } for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[i] - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Change position based on speed.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Change position based on speed.') } floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Apply some friction to desaccelerate.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Apply some friction to desaccelerate.') } floatingObject.currentSpeed.x = floatingObject.currentSpeed.x * floatingObject.friction // Desaceleration factor. floatingObject.currentSpeed.y = floatingObject.currentSpeed.y * floatingObject.friction // Desaceleration factor. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Gives a minimun speed towards their taget.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Gives a minimun speed towards their taget.') } let payload = { position: undefined, @@ -395,7 +563,7 @@ function newFloatingLayer () { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Set a maximun speed.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Set a maximun speed.') } const MAX_SPEED = 50 @@ -447,7 +615,7 @@ function newFloatingLayer () { // We let the Floating Object animate the physics loops by itself. - floatingObject.physicsLoop() + floatingObject.physics() /* Collision Control */ @@ -466,163 +634,15 @@ function newFloatingLayer () { gravityForce(floatingObject, payload) } - drawVisibleObjects() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> applyPhysics -> err.message = ' + err.message) } - } - } - - function drawVisibleObjects () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> drawVisibleObjects -> Entering function.') } - - /* We draw all the visibleFloatingObjects. */ - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - - makeVisible() - } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physicsLoop -> drawVisibleObjects -> err.message = ' + err.message) } - } - } - - function makeVisible () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> makeVisible -> Entering function.') } - - /* Now we check if any of the created FloatingObjects where enabled to run under the Physics Engine. */ - - for (let i = 0; i < invisibleFloatingObjects.length; i++) { - let floatingObject = invisibleFloatingObjects[i] - - let payload = { - position: undefined, - visible: false - } - - switch (floatingObject.type) { - - case 'Profile Ball': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible - break - } - case 'Note': { - if (floatingObject.payload.notes[floatingObject.payloadNoteIndex] !== undefined) { - payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position - payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible - } - break - } - case 'Strategy Part': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible - break - } - default: { - break - } - } - - if (payload.visible === true) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> payload.visible = ' + payload.visible) } - - /* The first time that the floatingObject becomes visible, we need to do this. */ - - floatingObject.radomizeCurrentPosition(payload.position) - floatingObject.radomizeCurrentSpeed() - - visibleFloatingObjects.push(floatingObject) - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject added to visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - - invisibleFloatingObjects.splice(i, 1) // Delete item from array. - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject removed from invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - - return // Only one at the time. - } - } - - makeInvisible() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> makeVisible -> err.message = ' + err.message) } - } - } - - function makeInvisible () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> makeInvisible -> Entering function.') } - - /* Finally we check if any of the currently visible floatingObjects has become invisible and must be removed from the Physics Engine. */ - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[i] - - let payload = { - position: undefined, - visible: true - } - - switch (floatingObject.type) { - - case 'Profile Ball': { - payload.visible = floatingObject.payload.profile.visible - break - } - case 'Note': { - payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible - break - } - case 'Strategy Part': { - payload.visible = floatingObject.payload.profile.visible - break - } - default: { - break - } - } - - if (payload.visible === false) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> payload.visible = ' + payload.visible) } - - invisibleFloatingObjects.push(floatingObject) - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject added to invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - - visibleFloatingObjects.splice(i, 1) // Delete item from array. - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject removed from visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - - return // Only one at the time. - } - } - animateDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> makeInvisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err.message = ' + err.message) } } } function animateDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> animateDyingObjects -> Entering function.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> animateDyingObjects -> Entering function.') } /* We animate some parts of the dying objects */ @@ -643,31 +663,11 @@ function newFloatingLayer () { drawDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> animateDyingObjects -> err.message = ' + err.message) } - } - } - - function drawDyingObjects () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> drawDyingObjects -> Entering function.') } - - /* We also draw all the dyingFloatingObjects */ - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[dyingFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> drawDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 85c1e8488..953ddae6f 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -10,7 +10,7 @@ function newFloatingObject () { let thisObject = { - physicsLoop: physicsLoop, + physics: physics, payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. @@ -123,15 +123,15 @@ function newFloatingObject () { } } - function physicsLoop (callBackFunction) { + function physics (callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - thisObject.underlayingObject.physicsLoop() + thisObject.underlayingObject.physics() if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index e38c0b7b8..7be029bf8 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -15,6 +15,7 @@ function newFloatingSpace () { makeVisible: makeVisible, makeInvisible: makeInvisible, draw: draw, + physics: physics, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -66,10 +67,16 @@ function newFloatingSpace () { return container } + function physics () { + thisObject.floatingLayer.physics() + } + function draw () { if (visible === true) { drawBackground() } + + thisObject.floatingLayer.draw() } function drawBackground () { From 26308b3704a6c5cb83e9e2b7532298d564fc623f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 23:13:59 +0200 Subject: [PATCH 018/143] Dragging working with containers --- Canvas.js | 51 ++++++++++++++++++--------------- Container.js | 1 + FloatingSpace/FloatingLayer.js | 2 -- FloatingSpace/FloatingObject.js | 6 ++-- FloatingSpace/Note.js | 9 +++--- FloatingSpace/ProfileBall.js | 9 +++--- FloatingSpace/StrategyPart.js | 17 ++++------- 7 files changed, 45 insertions(+), 50 deletions(-) diff --git a/Canvas.js b/Canvas.js index 8624f0b4b..390375463 100644 --- a/Canvas.js +++ b/Canvas.js @@ -357,16 +357,21 @@ function newCanvas () { return } - /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) - floatingObjectBeingDragged = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingDragged >= 0) { + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true floatingObjectDragStarted = true return } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + + /* we check if it is over any of the existing containers at the Chart Space. */ container = thisObject.chartSpace.getContainer(point) @@ -497,12 +502,22 @@ function newCanvas () { if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { if (floatingObjectDragStarted === true) { - if (thisObject.floatingSpace.floatingLayer.isInsideFloatingObject(floatingObjectBeingDragged, point.x, point.y) === false) { - /* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer. - In this case we cancell the drag operation . */ - + let targetContainer = thisObject.floatingSpace.getContainer(point) + if (targetContainer !== undefined) { + if (targetContainer.id !== containerBeingDragged.id) { + containerBeingDragged = undefined + containerDragStarted = false + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } else { + containerDragStarted = false + containerBeingDragged = undefined floatingObjectDragStarted = false browserCanvas.style.cursor = 'auto' + ignoreNextClick = true return } } @@ -582,12 +597,10 @@ function newCanvas () { /* We check if the mouse is over a floatingObject/ */ if (thisObject.floatingSpace !== undefined) { - let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingClicked >= 0) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.container.eventHandler.raiseEvent('onMouseOver', point) + container = thisObject.floatingSpace.getContainer(point) + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) return } } @@ -680,15 +693,6 @@ function newCanvas () { browserCanvas.style.cursor = 'grabbing' thisObject.eventHandler.raiseEvent('Dragging', undefined) - let targetFloatingObject = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectDragStarted) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged) - - floatingObject.container.frame.position.x = dragVector.upX - floatingObject.container.frame.position.y = dragVector.upY - } - if (containerDragStarted || viewPortBeingDragged) { /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ @@ -734,3 +738,4 @@ function newCanvas () { } } } + diff --git a/Container.js b/Container.js index 5d743b388..f2823a8ad 100644 --- a/Container.js +++ b/Container.js @@ -1,6 +1,7 @@ function newContainer () { let thisObject = { + id: Math.trunc(Math.random() * 10000000), frame: undefined, displacement: undefined, eventHandler: undefined, diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 075e6a536..8c344a70a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -660,8 +660,6 @@ function newFloatingLayer () { break // only one at the time. } } - - drawDyingObjects() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 953ddae6f..6b61f65c7 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -58,10 +58,10 @@ function newFloatingObject () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') + thisObject.container.initialize(MODULE_NAME, 'Circle') thisObject.container.isClickeable = true - thisObject.container.isDraggeable = false + thisObject.container.isDraggeable = true + thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 3d8e596a0..46288c127 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -4,7 +4,7 @@ function newNote () { let thisObject = { container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -12,9 +12,8 @@ function newNote () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -38,7 +37,7 @@ function newNote () { } } - function physicsLoop () { + function physics () { } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 07bf74b20..32a2c9b73 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -4,7 +4,7 @@ function newProfileBall () { let thisObject = { container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -12,9 +12,8 @@ function newProfileBall () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -93,7 +92,7 @@ function newProfileBall () { } } - function physicsLoop () { + function physics () { // The menuItems also have a target. for (let i = 0; i < ballStringMenu.length; i++) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 18604c166..34bceccdd 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -5,7 +5,7 @@ function newStrategyPart () { let thisObject = { type: undefined, container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -13,9 +13,8 @@ function newStrategyPart () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -276,16 +275,10 @@ function newStrategyPart () { } function getContainer (point) { - let container - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } + return undefined } - function physicsLoop () { + function physics () { // The menuItems also have a target. for (let i = 0; i < ballStringMenu.length; i++) { From 3757f8bbacace7f9a16b37a27e3c05603b053d46 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 23:32:43 +0200 Subject: [PATCH 019/143] Wheel to change repulsion working --- Canvas.js | 11 +++++------ Spaces/FloatingSpace.js | 21 ++++++++++++++++++++- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/Canvas.js b/Canvas.js index 390375463..1d73c1032 100644 --- a/Canvas.js +++ b/Canvas.js @@ -636,7 +636,7 @@ function newCanvas () { } event.mousePosition = point - + let container let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) if (panelContainer !== undefined && panelContainer.isWheelable === true) { @@ -644,12 +644,12 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* We try second with floating objects. */ + /* We try second with floating objects. */ - let floatingObjectIndex = canvas.floatingSpace.floatingLayer.isInside(point.x, point.y) + container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) - if (floatingObjectIndex > 0) { - canvas.floatingSpace.floatingLayer.changeTargetRepulsion(event.wheelDelta) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -738,4 +738,3 @@ function newCanvas () { } } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 7be029bf8..6070b086d 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -12,6 +12,7 @@ function newFloatingSpace () { profileBalls: undefined, strategyParts: undefined, noteSets: undefined, + container: undefined, makeVisible: makeVisible, makeInvisible: makeInvisible, draw: draw, @@ -21,6 +22,15 @@ function newFloatingSpace () { finalize: finalize } + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = true + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + let visible = false return thisObject @@ -44,6 +54,12 @@ function newFloatingSpace () { thisObject.strategyParts = newStrategyParts() thisObject.strategyParts.initialize(thisObject.floatingLayer) + + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + } + + function onMouseWheel (event) { + thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta) } function makeVisible () { @@ -64,6 +80,10 @@ function newFloatingSpace () { container = thisObject.floatingLayer.getContainer(point) if (container !== undefined) { return container } + if (visible === true) { + return thisObject.container + } + return container } @@ -89,4 +109,3 @@ function newFloatingSpace () { browserCanvasContext.fill() } } - From a72115b1d46ce122ea735ba8eff514cdd9af59c1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 23:39:09 +0200 Subject: [PATCH 020/143] Cleaning non used code --- Canvas.js | 18 ++++++++-------- FloatingSpace/FloatingLayer.js | 39 ---------------------------------- 2 files changed, 9 insertions(+), 48 deletions(-) diff --git a/Canvas.js b/Canvas.js index 1d73c1032..d74f04d2d 100644 --- a/Canvas.js +++ b/Canvas.js @@ -637,10 +637,10 @@ function newCanvas () { event.mousePosition = point let container - let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) - if (panelContainer !== undefined && panelContainer.isWheelable === true) { - panelContainer.eventHandler.raiseEvent('Mouse Wheel', event) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -655,19 +655,19 @@ function newCanvas () { /* We try the Bottom Space. */ - let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) - if (bottomContainer !== undefined && bottomContainer.isWheelable === true) { - bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } /* Finally we try the Chart Space. */ - let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) + container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) - if (chartContainer !== undefined && chartContainer.isWheelable === true) { - chartContainer.eventHandler.raiseEvent('Mouse Wheel', event) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } else { /* If all the above fails, we fallback into applying zoom to the viewPort */ diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 8c344a70a..dd3188f99 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -26,8 +26,6 @@ function newFloatingLayer () { killFloatingObject: killFloatingObject, getFloatingObject: getFloatingObject, physics: physics, - isInside: isInside, - isInsideFloatingObject: isInsideFloatingObject, changeTargetRepulsion: changeTargetRepulsion, draw: draw, getContainer: getContainer, @@ -913,43 +911,6 @@ function newFloatingLayer () { } } - function isInside (x, y) { - try { - /* This function detects weather the point x,y is inside any of the floatingObjects. */ - - for (var i = 0; i < visibleFloatingObjects.length; i++) { - var floatingObject = visibleFloatingObjects[i] - var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - - if (distance < floatingObject.container.frame.radius) { - return i - } - } - return -1 - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] isInside -> err.message = ' + err.message) } - } - } - - function isInsideFloatingObject (floatingObjectIndex, x, y) { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] isInsideFloatingObject -> Entering function.') } - - /* This function detects weather the point x,y is inside one particular floatingObjects. */ - - var floatingObject = visibleFloatingObjects[floatingObjectIndex] - var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - - if (distance < floatingObject.container.frame.radius) { - return true - } - - return false - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] isInsideFloatingObject -> err.message = ' + err.message) } - } - } - function distance (x1, y1, x2, y2) { try { if (INTENSIVE_LOG === true) { logger.write('[INFO] distance -> Entering function.') } From 8294ec85563f4bf3283de65877f85795be83d69b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 12:29:14 +0200 Subject: [PATCH 021/143] Running without menues --- CompetitionStorage.js | 2 +- Container.js | 13 +- FloatingSpace/CircularMenu.js | 99 ++++++++++++ FloatingSpace/CircularMenuItem.js | 148 ++++++++++++++++++ FloatingSpace/FloatingLayer.js | 36 ++--- FloatingSpace/FloatingObject.js | 11 +- FloatingSpace/Note.js | 46 +++--- FloatingSpace/StrategyPart.js | 194 +++++------------------- Frame.js | 12 +- ProductStorage.js | 8 +- Scales/TimePeriodScale.js | 6 +- StrategySpace/StrategyCollectionItem.js | 2 +- TimelineChart.js | 2 +- Utilities/RoundedCornersBackground.js | 48 +++--- 14 files changed, 386 insertions(+), 241 deletions(-) create mode 100644 FloatingSpace/CircularMenu.js create mode 100644 FloatingSpace/CircularMenuItem.js diff --git a/CompetitionStorage.js b/CompetitionStorage.js index aebec6a93..b10a06b2a 100644 --- a/CompetitionStorage.js +++ b/CompetitionStorage.js @@ -94,7 +94,7 @@ function newCompetitionStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) } if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> This bot has not starting competing yet.') } break diff --git a/Container.js b/Container.js index f2823a8ad..e3a64e4b8 100644 --- a/Container.js +++ b/Container.js @@ -2,6 +2,7 @@ function newContainer () { let thisObject = { id: Math.trunc(Math.random() * 10000000), + type: 'Rectangle', frame: undefined, displacement: undefined, eventHandler: undefined, @@ -18,6 +19,7 @@ function newContainer () { let connectedToParentWidth = false let connectedToParentHeight = false + let connectedToParentRadius = false let isConnectedToParent = false let dimensionsChangedEventSubscriptionId @@ -36,6 +38,7 @@ function newContainer () { function initialize (pName, pType) { thisObject.name = pName + thisObject.type = pType thisObject.frame = newFrame() thisObject.frame.initialize(pType) @@ -50,9 +53,10 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight) { + function connectToParent (parentContainer, onWidth, onHeight, onRadius) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight + connectedToParentRadius = onRadius isConnectedToParent = true thisObject.displacement.parentDisplacement = parentContainer.displacement @@ -69,6 +73,9 @@ function newContainer () { if (connectedToParentHeight) { thisObject.frame.height = thisObject.parentContainer.frame.height } + if (connectedToParentRadius) { + thisObject.frame.radius = thisObject.parentContainer.frame.radius + } } function onParentDimmensionsChanged (event) { @@ -81,6 +88,10 @@ function newContainer () { thisObject.frame.height = thisObject.parentContainer.frame.height dimmensionsChanged = true } + if (connectedToParentRadius) { + thisObject.frame.radius = thisObject.parentContainer.frame.radius + dimmensionsChanged = true + } if (dimmensionsChanged) { thisObject.eventHandler.raiseEvent('Dimmensions Changed', event) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js new file mode 100644 index 000000000..d1b1ed450 --- /dev/null +++ b/FloatingSpace/CircularMenu.js @@ -0,0 +1,99 @@ + +function newCircularMenu () { + const MODULE_NAME = 'Circular Menu' + + let thisObject = { + container: undefined, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + + let menuItemsInitialValues = [] + let menuItems = [] + + let isMouseOver = false + + return thisObject + + function initialize (menuItemsInitialValues) { +/* Create the array of Menu Items */ + + for (let i = 0; i < menuItemsInitialValues.length; i++) { + let menuItem = newCircularMenuItem() + let menuItemInitialValue = menuItemsInitialValues[i] + + menuItem.label = menuItemInitialValue.label + menuItem.visible = menuItemInitialValue.visible + menuItem.imagePathOn = menuItemInitialValue.imagePathOn + menuItem.imagePathOff = menuItemInitialValue.imagePathOff + menuItem.rawRadius = menuItemInitialValue.rawRadius + menuItem.targetRadius = menuItemInitialValue.label + menuItem.currentRadius = menuItemInitialValue.currentRadius + menuItem.angle = menuItemInitialValue.angle + + menuItem.initialize() + menuItems.push(menuItem) + } + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + function getContainer (point) { + let container + + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + container = menutItem.getContainer(point) + if (container !== undefined) { return container } + } + } + + function physics () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.physics() + } + } + + function onMouseOver () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.targetRadius = menutItem.rawRadius * 1.5 + } + isMouseOver = true + } + + function onMouseNotOver () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.targetRadius = menutItem.rawRadius * 1 - i * 5 + } + isMouseOver = false + } + + function drawBackground (pFloatingObject) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.drawBackground() + } + } + + function drawForeground (pFloatingObject) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.drawForeground() + } + } +} diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js new file mode 100644 index 000000000..7869f8590 --- /dev/null +++ b/FloatingSpace/CircularMenuItem.js @@ -0,0 +1,148 @@ + +function newCircularMenuItem () { + const MODULE_NAME = 'Circular Menu Iem' + + let thisObject = { + iconOn: undefined, + iconOff: undefined, + label: undefined, + visible: false, + imagePathOn: undefined, + imagePathOff: undefined, + rawRadius: undefined, + targetRadius: undefined, + currentRadius: undefined, + angle: undefined, + container: undefined, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = 100 + thisObject.container.frame.height = 50 + + let isMouseOver = false + + return thisObject + + function initialize () { + /* Load Menu Images */ + + thisObject.iconOn = new Image() + thisObject.iconOn.onload = onImageLoad + + function onImageLoad () { + thisObject.iconOff = new Image() + thisObject.iconOff.onload = onImageLoad + + function onImageLoad () { + thisObject.canDrawIcon = true + } + thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff + } + thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn + thisObject.icon = thisObject.iconOn // The default value is ON. + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) { + if (thisObject.currentRadius < thisObject.targetRadius) { + thisObject.currentRadius = thisObject.currentRadius + 0.5 + } else { + thisObject.currentRadius = thisObject.currentRadius - 0.5 + } + } + } + + function onMouseOver () { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false + } + + function onMouseClick (event) { + + } + + function drawBackground () { + if (isMouseOver === true) { + let point = { + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y + } + + point = thisObject.container.frame.frameThisPoint(point) + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + } + + function drawForeground () { + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + /* Menu Item */ + + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { + let menuPosition = { + x: position.x + thisObject.currentRadius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), + y: position.y - thisObject.currentRadius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } + + browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) + + /* Menu Label */ + + let labelPoint + let fontSize = 10 + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + if (thisObject.label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) { + labelPoint = { + x: menuPosition.x + thisObject.currentRadius + 10, + y: menuPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(thisObject.label, labelPoint.x, labelPoint.y) + } + } + } +} diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index dd3188f99..8ee181c27 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -119,7 +119,7 @@ function newFloatingLayer () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -250,12 +250,12 @@ function newFloatingLayer () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -298,7 +298,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err= ' + err.stack) } } } @@ -323,7 +323,7 @@ function newFloatingLayer () { makeVisible() } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err= ' + err.stack) } } } @@ -391,7 +391,7 @@ function newFloatingLayer () { makeInvisible() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err= ' + err.stack) } } } @@ -449,7 +449,7 @@ function newFloatingLayer () { drawDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err= ' + err.stack) } } } @@ -469,7 +469,7 @@ function newFloatingLayer () { floatingObject.drawForeground() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err= ' + err.stack) } } } } @@ -634,7 +634,7 @@ function newFloatingLayer () { animateDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err= ' + err.stack) } } } @@ -659,11 +659,11 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err= ' + err.stack) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } } } @@ -714,7 +714,7 @@ function newFloatingLayer () { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err= ' + err.stack) } } } @@ -778,7 +778,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err= ' + err.stack) } } } @@ -861,7 +861,7 @@ function newFloatingLayer () { floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err= ' + err.stack) } } } @@ -881,7 +881,7 @@ function newFloatingLayer () { maxTargetRepulsionForce = 0.0001 } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err= ' + err.stack) } } } @@ -907,7 +907,7 @@ function newFloatingLayer () { return true } else return true } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] colliding -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] colliding -> err= ' + err.stack) } } } @@ -917,7 +917,7 @@ function newFloatingLayer () { return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } } } @@ -995,7 +995,7 @@ function newFloatingLayer () { floatingObject1.container.frame.position = pos1 floatingObject2.container.frame.position = pos2 } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err= ' + err.stack) } } } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6b61f65c7..81cc7f39e 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -88,6 +88,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true) break } default: { @@ -105,7 +106,7 @@ function newFloatingObject () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -131,7 +132,7 @@ function newFloatingObject () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -169,7 +170,7 @@ function newFloatingObject () { } function initializeMass (suggestedValue) { - var mass = suggestedValue + let mass = suggestedValue if (mass < 0.1) { mass = 0.1 } @@ -179,7 +180,7 @@ function newFloatingObject () { } function initializeRadius (suggestedValue) { - var radius = suggestedValue + let radius = suggestedValue if (radius < 2) { radius = 2 } @@ -187,6 +188,8 @@ function newFloatingObject () { thisObject.rawRadius = radius thisObject.targetRadius = radius thisObject.container.frame.radius = radius / 3 + + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } function initializeImageSize (suggestedValue) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 46288c127..0fda6958f 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -89,11 +89,11 @@ function newNote () { } function drawForeground (pFloatingObject) { - const BUBBLE_CORNERS_RADIOUS = 5 + const BUBBLE_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 14 - const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 4 - const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 2 + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 4 + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 2 let borderPoint1 let borderPoint2 @@ -109,23 +109,23 @@ function newNote () { /* Rounded Background */ borderPoint1 = { - x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIUS } borderPoint2 = { - x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIUS } borderPoint3 = { - x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS } borderPoint4 = { - x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS } titleBarPoint1 = { @@ -143,14 +143,14 @@ function newNote () { browserCanvasContext.fillStyle = 'rgba(255, 249, 196, 0.75)' browserCanvasContext.beginPath() - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIOUS, borderPoint3.y) - browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIUS, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIUS, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y) browserCanvasContext.closePath() @@ -166,10 +166,10 @@ function newNote () { browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) - browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y) - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y) browserCanvasContext.closePath() diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 34bceccdd..03066a88a 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -4,6 +4,7 @@ function newStrategyPart () { let thisObject = { type: undefined, + menu: undefined, container: undefined, physics: physics, drawBackground: drawBackground, @@ -20,7 +21,6 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let ballStringMenu = [] let floatingLayer let isMouseOver = false let image @@ -31,10 +31,11 @@ function newStrategyPart () { function initialize (pFloatingLayer, pType) { floatingLayer = pFloatingLayer + let menuItemsInitialValues = [] switch (pType) { case 'Strategy': { imagePath = 'Images/icons/style-01/quality.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Settings', visible: false, @@ -59,7 +60,7 @@ function newStrategyPart () { } case 'Strategy Entry': { imagePath = 'Images/icons/style-01/startup.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -74,7 +75,7 @@ function newStrategyPart () { } case 'Strategy Exit': { imagePath = 'Images/icons/style-01/support.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -89,7 +90,7 @@ function newStrategyPart () { } case 'Trade Entry': { imagePath = 'Images/icons/style-01/compass.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -104,7 +105,7 @@ function newStrategyPart () { } case 'Trade Exit': { imagePath = 'Images/icons/style-01/broken-link.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -119,7 +120,7 @@ function newStrategyPart () { } case 'Stop': { imagePath = 'Images/icons/style-01/pixel.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Phase', visible: false, @@ -134,7 +135,7 @@ function newStrategyPart () { } case 'Take Profit': { imagePath = 'Images/icons/style-01/competition.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Phase', visible: false, @@ -149,7 +150,7 @@ function newStrategyPart () { } case 'Phase': { imagePath = 'Images/icons/style-01/placeholder.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Edit Code', visible: false, @@ -184,7 +185,7 @@ function newStrategyPart () { } case 'Situation': { imagePath = 'Images/icons/style-01/attractive.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Condition', visible: false, @@ -209,7 +210,7 @@ function newStrategyPart () { } case 'Condition': { imagePath = 'Images/icons/style-01/testing.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Edit Code', visible: false, @@ -237,6 +238,9 @@ function newStrategyPart () { } } + thisObject.menu = newCircularMenu() + thisObject.menu.initialize(menuItemsInitialValues) + /* Load Part Image */ if (imagePath !== undefined) { @@ -249,129 +253,48 @@ function newStrategyPart () { image.src = window.canvasApp.urlPrefix + imagePath } -/* Load Menu Images */ - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - menuItem.iconOn = new Image() - menuItem.iconOn.onload = onImageLoad - - function onImageLoad () { - menuItem.iconOff = new Image() - menuItem.iconOff.onload = onImageLoad - - function onImageLoad () { - menuItem.canDrawIcon = true - } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff - } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn - menuItem.icon = menuItem.iconOn // The default value is ON. - } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { - return undefined + let container + + container = thisObject.menu.getContainer(point) + if (container !== undefined) { return container } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } function physics () { - // The menuItems also have a target. - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { - if (menuItem.currentRadius < menuItem.targetRadius) { - menuItem.currentRadius = menuItem.currentRadius + 0.5 - } else { - menuItem.currentRadius = menuItem.currentRadius - 0.5 - } - } - } + thisObject.menu.physics() } function onMouseOver () { - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - menuItem.targetRadius = menuItem.rawRadius * 1.5 - } - + thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') isMouseOver = true } function onMouseNotOver () { - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 - } - + thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') isMouseOver = false } function onMouseClick (event) { - /* What we need to do here is to check which menu item was clicked, if any. */ - pPoint = event.point - pFloatingObject = event.parent - - let menuItemIndex - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let position = { - x: pFloatingObject.container.frame.position.x + pFloatingObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.container.frame.position.y - pFloatingObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) - } - - browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - - let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)) - - if (distance < menuItem.currentRadius) { - menuItemIndex = i - } - } - } - - if (menuItemIndex !== undefined) { - switch (menuItemIndex) { - - case 0: { - // This menu item is to turn ON / OFF the plotting of this bot. - - if (pFloatingObject.payload.profile.plot === true) { - pFloatingObject.payload.profile.plot = false - - let menuItem = ballStringMenu[0] - menuItem.icon = menuItem.iconOff - } else { - pFloatingObject.payload.profile.plot = true - - let menuItem = ballStringMenu[0] - menuItem.icon = menuItem.iconOn - } - - break - } - - case 1: { - // This menu item is to turn ON the Debug Log pannel for the bot. - - break - } - } - } } function drawBackground (pFloatingObject) { + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() + } + + function drawPartBackground (pFloatingObject) { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ @@ -405,7 +328,7 @@ function newStrategyPart () { if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ - var radius = 1 + let radius = 1 browserCanvasContext.beginPath() browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) @@ -416,6 +339,11 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { + drawPartForeground(pFloatingObject) + thisObject.menu.drawForeground() + } + + function drawPartForeground (pFloatingObject) { let position = { x: pFloatingObject.container.frame.position.x, y: pFloatingObject.container.frame.position.y @@ -423,18 +351,6 @@ function newStrategyPart () { let radius = pFloatingObject.container.frame.radius - if (radius > 5) { - /* Contourn */ -/* - browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() - */ - } - if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ @@ -463,38 +379,6 @@ function newStrategyPart () { } } - /* StringBall Menu */ - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let menuPosition = { - x: position.x + radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } - - browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - - /* Menu Label */ - - let labelPoint - let fontSize = 10 - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - if (menuItem.label !== undefined && menuItem.currentRadius >= menuItem.targetRadius) { - labelPoint = { - x: menuPosition.x + menuItem.currentRadius + 10, - y: menuPosition.y + fontSize * FONT_ASPECT_RATIO - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fillText(menuItem.label, labelPoint.x, labelPoint.y) - } - } - } - /* Label Text */ if (radius > 6 && isMouseOver === true) { diff --git a/Frame.js b/Frame.js index 2fd4391da..f46f70630 100644 --- a/Frame.js +++ b/Frame.js @@ -1,6 +1,6 @@  function newFrame () { - const PANEL_CORNERS_RADIOUS = 5 + const PANEL_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 15 // this must be grater than radius let thisObject = { @@ -216,7 +216,7 @@ function newFrame () { function background () { let params = { - cornerRadious: 5, + cornerRadius: 5, lineWidth: 0.1, opacity: 0.75, container: thisObject.container, @@ -247,10 +247,10 @@ function newFrame () { browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) - browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y) - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y) browserCanvasContext.closePath() diff --git a/ProductStorage.js b/ProductStorage.js index 66c3ea939..bc0d98456 100644 --- a/ProductStorage.js +++ b/ProductStorage.js @@ -171,7 +171,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -227,7 +227,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -282,7 +282,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -334,7 +334,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) } callBackFunction(err) return diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 85e3afc74..95c9ff5e3 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -220,7 +220,7 @@ to be visible at the top of the viewPort. */ /* We draw the circle container */ const RED_LINE_HIGHT = 5 - const RADIOUS = 25 + const RADIUS = 25 const OPACITY = 1 let centerPoint = { @@ -229,14 +229,14 @@ to be visible at the top of the viewPort. */ } browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 325433b9f..182338665 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -288,7 +288,7 @@ function newStrategyCollectionItem () { function borders () { let params = { - cornerRadious: 8, + cornerRadius: 8, lineWidth: 0.1, opacity: 1, container: thisObject.container, diff --git a/TimelineChart.js b/TimelineChart.js index a5f15f160..bdad50c22 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -135,7 +135,7 @@ if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') } - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) return diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 76863de02..f9386eb86 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -1,22 +1,22 @@ function roundedCornersBackground (params) { borderPoint1 = { - x: params.cornerRadious, - y: params.cornerRadious + x: params.cornerRadius, + y: params.cornerRadius } borderPoint2 = { - x: params.container.frame.width - params.cornerRadious, - y: params.cornerRadious + x: params.container.frame.width - params.cornerRadius, + y: params.cornerRadius } borderPoint3 = { - x: params.container.frame.width - params.cornerRadious, - y: params.container.frame.height - params.cornerRadious + x: params.container.frame.width - params.cornerRadius, + y: params.container.frame.height - params.cornerRadius } borderPoint4 = { - x: params.cornerRadious, - y: params.container.frame.height - params.cornerRadious + x: params.cornerRadius, + y: params.container.frame.height - params.cornerRadius } /* Now the transformations. */ @@ -35,14 +35,14 @@ function roundedCornersBackground (params) { browserCanvasContext.beginPath() - browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadious + SHADOW_OFFSET) - browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) - browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadious + SHADOW_OFFSET) - browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadius + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadius + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) browserCanvasContext.closePath() @@ -63,14 +63,14 @@ function roundedCornersBackground (params) { browserCanvasContext.beginPath() - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadious) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious, borderPoint3.y) - browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadious) - browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadius) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadius) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius, borderPoint1.y) browserCanvasContext.closePath() From d7acb36f39d5ca3f8fcda8535c18313e230e8071 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 13:05:26 +0200 Subject: [PATCH 022/143] Physics distributed --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 4 +-- FloatingSpace/FloatingLayer.js | 30 ---------------------- FloatingSpace/FloatingObject.js | 41 +++++++++++++++++++++++++------ FloatingSpace/StrategyPart.js | 1 + 5 files changed, 37 insertions(+), 40 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index d1b1ed450..0abe8e308 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -43,6 +43,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() + menuItem.container.connectToParent(thisObject.container, false, false, true) menuItems.push(menuItem) } diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 7869f8590..442ab6cb7 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -121,8 +121,8 @@ function newCircularMenuItem () { if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { let menuPosition = { - x: position.x + thisObject.currentRadius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), - y: position.y - thisObject.currentRadius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } + x: position.x + thisObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), + y: position.y - thisObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 8ee181c27..ff6c93287 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -581,36 +581,6 @@ function newFloatingLayer () { floatingObject.currentSpeed.y = -MAX_SPEED } - // The radius also have a target. - - if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 1) { - if (floatingObject.container.frame.radius < floatingObject.targetRadius) { - floatingObject.container.frame.radius = floatingObject.container.frame.radius + 0.5 - } else { - floatingObject.container.frame.radius = floatingObject.container.frame.radius - 0.5 - } - } - - // The imageSize also have a target. - - if (Math.abs(floatingObject.currentImageSize - floatingObject.targetImageSize) >= 1) { - if (floatingObject.currentImageSize < floatingObject.targetImageSize) { - floatingObject.currentImageSize = floatingObject.currentImageSize + 1 - } else { - floatingObject.currentImageSize = floatingObject.currentImageSize - 1 - } - } - - // The fontSize also have a target. - - if (Math.abs(floatingObject.currentFontSize - floatingObject.targetFontSize) >= 0.2) { - if (floatingObject.currentFontSize < floatingObject.targetFontSize) { - floatingObject.currentFontSize = floatingObject.currentFontSize + 0.2 - } else { - floatingObject.currentFontSize = floatingObject.currentFontSize - 0.2 - } - } - // We let the Floating Object animate the physics loops by itself. floatingObject.physics() diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 81cc7f39e..471ec4acb 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -124,16 +124,41 @@ function newFloatingObject () { } } - function physics (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function physics () { + thisObjectPhysics() + thisObject.underlayingObject.physics() + } - thisObject.underlayingObject.physics() + function thisObjectPhysics () { + // The radius also have a target. - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } + if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { + if (thisObject.container.frame.radius < thisObject.targetRadius) { + thisObject.container.frame.radius = thisObject.container.frame.radius + 0.5 + } else { + thisObject.container.frame.radius = thisObject.container.frame.radius - 0.5 + } + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + } + + // The imageSize also have a target. + + if (Math.abs(thisObject.currentImageSize - thisObject.targetImageSize) >= 1) { + if (thisObject.currentImageSize < thisObject.targetImageSize) { + thisObject.currentImageSize = thisObject.currentImageSize + 1 + } else { + thisObject.currentImageSize = thisObject.currentImageSize - 1 + } + } + + // The fontSize also have a target. + + if (Math.abs(thisObject.currentFontSize - thisObject.targetFontSize) >= 0.2) { + if (thisObject.currentFontSize < thisObject.targetFontSize) { + thisObject.currentFontSize = thisObject.currentFontSize + 0.2 + } else { + thisObject.currentFontSize = thisObject.currentFontSize - 0.2 + } } } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 03066a88a..7aabdcbd6 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -240,6 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true) /* Load Part Image */ From 6476fd642884adb07a9cb2b3eb7d7c5415e0aafd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 13:44:57 +0200 Subject: [PATCH 023/143] Ready for capturing events at menu items --- FloatingSpace/CircularMenu.js | 2 +- FloatingSpace/CircularMenuItem.js | 10 ++++++--- FloatingSpace/FloatingObject.js | 23 ++++++++++---------- FloatingSpace/StrategyPart.js | 35 ++++++++++++++++--------------- 4 files changed, 38 insertions(+), 32 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 0abe8e308..22c55c56d 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -79,7 +79,7 @@ function newCircularMenu () { function onMouseNotOver () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] - menutItem.targetRadius = menutItem.rawRadius * 1 - i * 5 + menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5 } isMouseOver = false } diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 442ab6cb7..7b3091237 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -61,7 +61,7 @@ function newCircularMenuItem () { function getContainer (point) { let container - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { return thisObject.container } else { return undefined @@ -115,15 +115,18 @@ function newCircularMenuItem () { y: 0 } + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 position = thisObject.container.frame.frameThisPoint(position) /* Menu Item */ if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { let menuPosition = { - x: position.x + thisObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), - y: position.y - thisObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } + x: position.x + thisObject.container.frame.radius * 4 / 7 * Math.cos(toRadians(thisObject.angle)), + y: position.y - thisObject.container.frame.radius * 4 / 7 * Math.sin(toRadians(thisObject.angle)) } + thisObject.container.frame.position = menuPosition browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) /* Menu Label */ @@ -146,3 +149,4 @@ function newCircularMenuItem () { } } } + diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 471ec4acb..4ae674585 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -1,4 +1,4 @@ -  + function newFloatingObject () { const MODULE_NAME = 'Floating Object' const INFO_LOG = false @@ -130,28 +130,28 @@ function newFloatingObject () { } function thisObjectPhysics () { - // The radius also have a target. + // The radius also have a target. if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 0.5 + thisObject.container.frame.radius = thisObject.container.frame.radius + 2 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 0.5 + thisObject.container.frame.radius = thisObject.container.frame.radius - 2 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } - // The imageSize also have a target. + // The imageSize also have a target. if (Math.abs(thisObject.currentImageSize - thisObject.targetImageSize) >= 1) { if (thisObject.currentImageSize < thisObject.targetImageSize) { - thisObject.currentImageSize = thisObject.currentImageSize + 1 + thisObject.currentImageSize = thisObject.currentImageSize + 2 } else { - thisObject.currentImageSize = thisObject.currentImageSize - 1 + thisObject.currentImageSize = thisObject.currentImageSize - 2 } } - // The fontSize also have a target. + // The fontSize also have a target. if (Math.abs(thisObject.currentFontSize - thisObject.targetFontSize) >= 0.2) { if (thisObject.currentFontSize < thisObject.targetFontSize) { @@ -163,7 +163,7 @@ function newFloatingObject () { } function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 2.5 + thisObject.targetRadius = thisObject.rawRadius * 4.0 thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 @@ -275,13 +275,14 @@ function newFloatingObject () { function updateMass () { - // thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM; + // thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM; } function updateRadius () { - // thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR; + // thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR; } } + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 7aabdcbd6..5192aa977 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -44,7 +44,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 20 }, { label: 'Delete This Strategy', @@ -54,7 +54,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: -20 }] break } @@ -69,7 +69,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -84,7 +84,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -99,7 +99,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -114,7 +114,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -129,7 +129,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -144,7 +144,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -159,7 +159,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 40 }, { label: 'Add Situation', @@ -169,7 +169,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: 0 }, { label: 'Delete This Phase', @@ -179,7 +179,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -20 + angle: -40 }] break } @@ -194,7 +194,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 20 }, { label: 'Delete This Situation', @@ -204,7 +204,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: -20 }] break } @@ -219,7 +219,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 20 }, { label: 'Delete This Condition', @@ -229,7 +229,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: -20 }] break } @@ -397,7 +397,7 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius - fontSize * FONT_ASPECT_RATIO - 10 + y: position.y - radius / 2 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -410,7 +410,7 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius + fontSize * FONT_ASPECT_RATIO + 15 + y: position.y + radius / 2 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -420,3 +420,4 @@ function newStrategyPart () { } } } + From c69c8fc5b72395aeb49c043cd511b55576372564 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 14:03:49 +0200 Subject: [PATCH 024/143] Final touches on radius animation --- FloatingSpace/FloatingObject.js | 6 +++--- FloatingSpace/StrategyPart.js | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4ae674585..ff77d6ce9 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -134,9 +134,9 @@ function newFloatingObject () { if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 2 + thisObject.container.frame.radius = thisObject.container.frame.radius + 2.5 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 2 + thisObject.container.frame.radius = thisObject.container.frame.radius - 2.5 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } @@ -163,7 +163,7 @@ function newFloatingObject () { } function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 4.0 + thisObject.targetRadius = thisObject.rawRadius * 5.0 thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 5192aa977..6b0e395e0 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -291,7 +291,9 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - drawPartBackground(pFloatingObject) + if (isMouseOver === false) { + drawPartBackground(pFloatingObject) + } thisObject.menu.drawBackground() } From fbba9b217e71e1b03a31cb10ef5ed93c81315ddf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 15:33:03 +0200 Subject: [PATCH 025/143] frame position at item fixed --- FloatingSpace/CircularMenuItem.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 7b3091237..c4678ec24 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -28,8 +28,8 @@ function newCircularMenuItem () { thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = 100 - thisObject.container.frame.height = 50 + thisObject.container.frame.width = 150 + thisObject.container.frame.height = 30 let isMouseOver = false @@ -97,8 +97,6 @@ function newCircularMenuItem () { y: thisObject.container.frame.position.y } - point = thisObject.container.frame.frameThisPoint(point) - browserCanvasContext.beginPath() browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height) @@ -126,7 +124,9 @@ function newCircularMenuItem () { x: position.x + thisObject.container.frame.radius * 4 / 7 * Math.cos(toRadians(thisObject.angle)), y: position.y - thisObject.container.frame.radius * 4 / 7 * Math.sin(toRadians(thisObject.angle)) } - thisObject.container.frame.position = menuPosition + thisObject.container.frame.position.x = menuPosition.x - thisObject.currentRadius + thisObject.container.frame.position.y = menuPosition.y - thisObject.container.frame.height / 2 + browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) /* Menu Label */ From 9b295b8aad66e4155098d58aad9518398221a172 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 15:45:58 +0200 Subject: [PATCH 026/143] refactoring onMouseWheel --- Canvas.js | 8 ++++---- Panels/ProductsPanel.js | 4 ++-- Scales/RateScale.js | 2 +- Scales/TimePeriodScale.js | 2 +- Scales/TimeScale.js | 2 +- Spaces/FloatingSpace.js | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index d74f04d2d..5b0643147 100644 --- a/Canvas.js +++ b/Canvas.js @@ -640,7 +640,7 @@ function newCanvas () { container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -649,7 +649,7 @@ function newCanvas () { container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -658,7 +658,7 @@ function newCanvas () { container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -667,7 +667,7 @@ function newCanvas () { container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } else { /* If all the above fails, we fallback into applying zoom to the viewPort */ diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 0c532a7e0..38887727b 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -132,13 +132,13 @@ /* Listen to Status Changes Events */ productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged) - productCard.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + productCard.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } } } } - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) isInitialized = true } diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 679dbe118..f448c6aee 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -41,7 +41,7 @@ function newRateScale () { function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) if (!thisObject.heightPercentage) { diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 95c9ff5e3..6ed8308da 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -40,7 +40,7 @@ function newTimePeriodScale () { function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) readObjectState() newTimePeriod() diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 1516bcdef..5ceb30589 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -35,7 +35,7 @@ function newTimeScale () { function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) if (!thisObject.lenghtPercentage) { diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 6070b086d..56ce68e95 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -55,7 +55,7 @@ function newFloatingSpace () { thisObject.strategyParts = newStrategyParts() thisObject.strategyParts.initialize(thisObject.floatingLayer) - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } function onMouseWheel (event) { From 94f80bc686e62c51b0dce8a7637a952a046c0579 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 16:06:50 +0200 Subject: [PATCH 027/143] container connect to events implemented --- Container.js | 14 ++++++++++---- FloatingSpace/CircularMenu.js | 2 +- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPart.js | 2 +- PlottersManager.js | 4 ++-- Spaces/ChartSpace.js | 2 -- TimeMachine.js | 8 ++++---- TimelineChart.js | 4 ++-- 8 files changed, 21 insertions(+), 17 deletions(-) diff --git a/Container.js b/Container.js index e3a64e4b8..5b552e295 100644 --- a/Container.js +++ b/Container.js @@ -20,6 +20,8 @@ function newContainer () { let connectedToParentWidth = false let connectedToParentHeight = false let connectedToParentRadius = false + let connectedToParentEvents = false + let isConnectedToParent = false let dimensionsChangedEventSubscriptionId @@ -53,19 +55,23 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight, onRadius) { + function connectToParent (parentContainer, onWidth, onHeight, onRadius, onEvents) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight connectedToParentRadius = onRadius + connectedToParentEvents = onEvents + isConnectedToParent = true thisObject.displacement.parentDisplacement = parentContainer.displacement thisObject.frame.parentFrame = parentContainer.frame thisObject.parentContainer = parentContainer - dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) - onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) - onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + if (connectedToParentEvents === true) { + dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) + onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 22c55c56d..c3bd93af9 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -43,7 +43,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true) + menuItem.container.connectToParent(thisObject.container, false, false, true, true) menuItems.push(menuItem) } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index ff77d6ce9..a4f414869 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -88,7 +88,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true) break } default: { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6b0e395e0..67d4862e5 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -240,7 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) - thisObject.menu.container.connectToParent(thisObject.container, false, false, true) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true) /* Load Part Image */ diff --git a/PlottersManager.js b/PlottersManager.js index 99e544dcb..0c1ad5299 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -221,7 +221,7 @@ function newPlottersManager () { let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -463,7 +463,7 @@ function newPlottersManager () { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 3a25d6cc7..912ccf219 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -54,8 +54,6 @@ function newChartSpace () { var timeMachine = newTimeMachine() - // timeMachine.container.connectToParent(thisObject.container, true, true) - /* We make the time machine a little bit smaller than the current space. */ timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 diff --git a/TimeMachine.js b/TimeMachine.js index d25a9aaa1..ee1455dcc 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -82,7 +82,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true) timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -106,7 +106,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false) + timeScale.container.connectToParent(thisObject.container, false, false, false, true) timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -115,7 +115,7 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) rigthScale = newRateScale() - rigthScale.container.connectToParent(thisObject.container, false, false) + rigthScale.container.connectToParent(thisObject.container, false, false, false, true) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -157,7 +157,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true) timelineChart.container.frame.height = thisObject.container.frame.height diff --git a/TimelineChart.js b/TimelineChart.js index bdad50c22..7b1655bca 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -123,7 +123,7 @@ plotterManager = newPlottersManager() - plotterManager.container.connectToParent(thisObject.container, true, true) + plotterManager.container.connectToParent(thisObject.container, true, true, false, true) plotterManager.container.frame.position.x = 0 plotterManager.container.frame.position.y = 0 @@ -142,7 +142,7 @@ } timePeriodScale = newTimePeriodScale() - timePeriodScale.container.connectToParent(thisObject.container, false, false) + timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true) timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { let currentTimePeriod = timePeriod timePeriod = event.timePeriod From 7e4163cb54c341857d3fec1c88e7a0f2aed447f0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 16:32:07 +0200 Subject: [PATCH 028/143] Container with connect to parent with individual events --- Container.js | 18 ++++++++++++++---- FloatingSpace/CircularMenu.js | 11 ++++++----- FloatingSpace/CircularMenuItem.js | 9 ++++----- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPart.js | 2 +- PlottersManager.js | 4 ++-- TimeMachine.js | 8 ++++---- TimelineChart.js | 4 ++-- 8 files changed, 34 insertions(+), 24 deletions(-) diff --git a/Container.js b/Container.js index 5b552e295..f0ab7bb37 100644 --- a/Container.js +++ b/Container.js @@ -20,7 +20,10 @@ function newContainer () { let connectedToParentWidth = false let connectedToParentHeight = false let connectedToParentRadius = false - let connectedToParentEvents = false + + let onDimmensionsChangedParentEvent = false + let onMouseOverParentEvent = false + let onMouseNotOverParentEvent = false let isConnectedToParent = false @@ -55,11 +58,14 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight, onRadius, onEvents) { + function connectToParent (parentContainer, onWidth, onHeight, onRadius, onDimmensionsChangedEvent, onMouseOverEvent, onMouseNotOverEvent) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight connectedToParentRadius = onRadius - connectedToParentEvents = onEvents + + onDimmensionsChangedParentEvent = onDimmensionsChangedEvent + onMouseOverParentEvent = onMouseOverEvent + onMouseNotOverParentEvent = onMouseNotOverEvent isConnectedToParent = true @@ -67,9 +73,13 @@ function newContainer () { thisObject.frame.parentFrame = parentContainer.frame thisObject.parentContainer = parentContainer - if (connectedToParentEvents === true) { + if (onDimmensionsChangedParentEvent === true) { dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + } + if (onMouseOverParentEvent === true) { onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) + } + if (onMouseNotOverParentEvent === true) { onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index c3bd93af9..b1254425f 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -4,6 +4,7 @@ function newCircularMenu () { let thisObject = { container: undefined, + isDeployed: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, @@ -22,8 +23,6 @@ function newCircularMenu () { let menuItemsInitialValues = [] let menuItems = [] - let isMouseOver = false - return thisObject function initialize (menuItemsInitialValues) { @@ -43,7 +42,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true, true) + menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false) menuItems.push(menuItem) } @@ -72,16 +71,18 @@ function newCircularMenu () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 1.5 + menutItem.isDeployed = true } - isMouseOver = true + thisObject.isDeployed = true } function onMouseNotOver () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5 + menutItem.isDeployed = false } - isMouseOver = false + thisObject.isDeployed = false } function drawBackground (pFloatingObject) { diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index c4678ec24..18274ec54 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -3,6 +3,7 @@ function newCircularMenuItem () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { + isDeployed: undefined, iconOn: undefined, iconOff: undefined, label: undefined, @@ -31,8 +32,6 @@ function newCircularMenuItem () { thisObject.container.frame.width = 150 thisObject.container.frame.height = 30 - let isMouseOver = false - return thisObject function initialize () { @@ -79,11 +78,11 @@ function newCircularMenuItem () { } function onMouseOver () { - isMouseOver = true + } function onMouseNotOver () { - isMouseOver = false + } function onMouseClick (event) { @@ -91,7 +90,7 @@ function newCircularMenuItem () { } function drawBackground () { - if (isMouseOver === true) { + if (thisObject.isDeployed === true) { let point = { x: thisObject.container.frame.position.x, y: thisObject.container.frame.position.y diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index a4f414869..526fcbdf3 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -88,7 +88,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, true, true) break } default: { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 67d4862e5..909a9ff8e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -240,7 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) - thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, true, true) /* Load Part Image */ diff --git a/PlottersManager.js b/PlottersManager.js index 0c1ad5299..d3c00d03f 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -221,7 +221,7 @@ function newPlottersManager () { let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true, false, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -463,7 +463,7 @@ function newPlottersManager () { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true, false, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 diff --git a/TimeMachine.js b/TimeMachine.js index ee1455dcc..3de634771 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -82,7 +82,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true, false, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true) timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -106,7 +106,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false, false, true) + timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -115,7 +115,7 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) rigthScale = newRateScale() - rigthScale.container.connectToParent(thisObject.container, false, false, false, true) + rigthScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -157,7 +157,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true, false, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true) timelineChart.container.frame.height = thisObject.container.frame.height diff --git a/TimelineChart.js b/TimelineChart.js index 7b1655bca..baf381f59 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -123,7 +123,7 @@ plotterManager = newPlottersManager() - plotterManager.container.connectToParent(thisObject.container, true, true, false, true) + plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true) plotterManager.container.frame.position.x = 0 plotterManager.container.frame.position.y = 0 @@ -142,7 +142,7 @@ } timePeriodScale = newTimePeriodScale() - timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true) + timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { let currentTimePeriod = timePeriod timePeriod = event.timePeriod From 2d48fe7c4b6df549cbefa87434419e3bb9d05e0b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 19:01:54 +0200 Subject: [PATCH 029/143] Menu Items being highlighted! --- Canvas.js | 30 ++++++++------ FloatingSpace/CircularMenu.js | 15 ++++--- FloatingSpace/CircularMenuItem.js | 66 +++++++++++++++++-------------- FloatingSpace/FloatingObject.js | 18 ++++----- FloatingSpace/StrategyPart.js | 8 ++-- Scales/RateScale.js | 2 +- Scales/TimePeriodScale.js | 2 +- Scales/TimeScale.js | 2 +- 8 files changed, 82 insertions(+), 61 deletions(-) diff --git a/Canvas.js b/Canvas.js index 5b0643147..e137a69c8 100644 --- a/Canvas.js +++ b/Canvas.js @@ -47,7 +47,7 @@ function newCanvas () { thisObject.eventHandler = newEventHandler() let splashScreen - + let lastContainerMouseOver return thisObject /* @@ -538,10 +538,6 @@ function newCanvas () { try { if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } - /* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */ - - thisObject.eventHandler.raiseEvent('onMouseNotOver') - /* Then we check who is the current object underneeth the mounse. */ let point = { @@ -557,7 +553,7 @@ function newCanvas () { container = thisObject.strategySpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -568,7 +564,7 @@ function newCanvas () { container = thisObject.topSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -579,7 +575,7 @@ function newCanvas () { container = thisObject.bottomSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -590,7 +586,7 @@ function newCanvas () { container = thisObject.panelsSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -600,7 +596,7 @@ function newCanvas () { container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -611,10 +607,21 @@ function newCanvas () { container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } + + function containerFound () { + if (lastContainerMouseOver !== undefined) { + if (container.id !== lastContainerMouseOver.id) { + lastContainerMouseOver.eventHandler.raiseEvent('onMouseNotOver', point) + } + } + + container.eventHandler.raiseEvent('onMouseOver', point) + lastContainerMouseOver = container + } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } } @@ -738,3 +745,4 @@ function newCanvas () { } } } + diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index b1254425f..bf458d7b9 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -42,7 +42,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false) + menuItem.container.connectToParent(thisObject.container, false, false, true, true, true, true) menuItems.push(menuItem) } @@ -53,10 +53,12 @@ function newCircularMenu () { function getContainer (point) { let container - for (let i = 0; i < menuItems.length; i++) { - let menutItem = menuItems[i] - container = menutItem.getContainer(point) - if (container !== undefined) { return container } + if (thisObject.isDeployed === true) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + container = menutItem.getContainer(point) + if (container !== undefined) { return container } + } } } @@ -74,6 +76,7 @@ function newCircularMenu () { menutItem.isDeployed = true } thisObject.isDeployed = true + console.log('mouse over') } function onMouseNotOver () { @@ -83,6 +86,7 @@ function newCircularMenu () { menutItem.isDeployed = false } thisObject.isDeployed = false + console.log('mouse not over') } function drawBackground (pFloatingObject) { @@ -99,3 +103,4 @@ function newCircularMenu () { } } } + diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 18274ec54..52ebdedcc 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -32,6 +32,8 @@ function newCircularMenuItem () { thisObject.container.frame.width = 150 thisObject.container.frame.height = 30 + let isMouseOver = false + return thisObject function initialize () { @@ -59,11 +61,12 @@ function newCircularMenuItem () { function getContainer (point) { let container - - if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { - return thisObject.container - } else { - return undefined + if (thisObject.isDeployed === true) { + if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { + return thisObject.container + } else { + return undefined + } } } @@ -75,14 +78,21 @@ function newCircularMenuItem () { thisObject.currentRadius = thisObject.currentRadius - 0.5 } } + + thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius + thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2 } - function onMouseOver () { - + function onMouseOver (point) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { + isMouseOver = true + } else { + isMouseOver = false + } } - function onMouseNotOver () { - + function onMouseNotOver (point) { + isMouseOver = false } function onMouseClick (event) { @@ -90,16 +100,23 @@ function newCircularMenuItem () { } function drawBackground () { - if (thisObject.isDeployed === true) { - let point = { - x: thisObject.container.frame.position.x, - y: thisObject.container.frame.position.y + if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true) { + let position = { + x: 0, + y: 0 } + position = thisObject.container.frame.frameThisPoint(position) + browserCanvasContext.beginPath() - browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + browserCanvasContext.rect(position.x, position.y, thisObject.container.frame.width, thisObject.container.frame.height) + + if (isMouseOver === true) { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + } else { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 0.5)' + } browserCanvasContext.closePath() browserCanvasContext.fill() @@ -107,25 +124,16 @@ function newCircularMenuItem () { } function drawForeground () { - let position = { - x: 0, - y: 0 + let menuPosition = { + x: thisObject.currentRadius, + y: thisObject.container.frame.height / 2 } - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 - position = thisObject.container.frame.frameThisPoint(position) + menuPosition = thisObject.container.frame.frameThisPoint(menuPosition) /* Menu Item */ - if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { - let menuPosition = { - x: position.x + thisObject.container.frame.radius * 4 / 7 * Math.cos(toRadians(thisObject.angle)), - y: position.y - thisObject.container.frame.radius * 4 / 7 * Math.sin(toRadians(thisObject.angle)) } - - thisObject.container.frame.position.x = menuPosition.x - thisObject.currentRadius - thisObject.container.frame.position.y = menuPosition.y - thisObject.container.frame.height / 2 - + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) /* Menu Label */ diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 526fcbdf3..11557b0b0 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -102,7 +102,7 @@ function newFloatingObject () { thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - canvas.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { @@ -132,11 +132,11 @@ function newFloatingObject () { function thisObjectPhysics () { // The radius also have a target. - if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { + if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 3) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 2.5 + thisObject.container.frame.radius = thisObject.container.frame.radius + 3 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 2.5 + thisObject.container.frame.radius = thisObject.container.frame.radius - 3 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } @@ -162,20 +162,20 @@ function newFloatingObject () { } } - function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 5.0 + function onMouseOver (point) { + thisObject.targetRadius = thisObject.rawRadius * 6.0 thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver') + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) } - function onMouseNotOver () { + function onMouseNotOver (point) { thisObject.targetRadius = thisObject.rawRadius * 1 thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver') + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point) } function onMouseClick (pPoint) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 909a9ff8e..77747bc87 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -277,12 +277,12 @@ function newStrategyPart () { } function onMouseOver () { - thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') + // thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') isMouseOver = true } function onMouseNotOver () { - thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') + // thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') isMouseOver = false } @@ -399,7 +399,7 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius / 2 - fontSize * FONT_ASPECT_RATIO - 10 + y: position.y - radius / 3 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -412,7 +412,7 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius / 2 + fontSize * FONT_ASPECT_RATIO + 15 + y: position.y + radius / 3 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY diff --git a/Scales/RateScale.js b/Scales/RateScale.js index f448c6aee..300587042 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -33,7 +33,7 @@ function newRateScale () { } } - let visible = false + let visible = true let timeLineCoordinateSystem return thisObject diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 6ed8308da..ab3712520 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -27,7 +27,7 @@ function newTimePeriodScale () { } } - let visible = false + let visible = true let timeLineCoordinateSystem let objectStorage = {} let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 5ceb30589..5cc926436 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -27,7 +27,7 @@ function newTimeScale () { } } - let visible = false + let visible = true let timeLineCoordinateSystem return thisObject From 26a081391f8249b62b8b4a491e35148d812a730e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 19:22:59 +0200 Subject: [PATCH 030/143] Mouse over detected when leaving an object --- Container.js | 1 + Spaces/FloatingSpace.js | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/Container.js b/Container.js index f0ab7bb37..7a49461ab 100644 --- a/Container.js +++ b/Container.js @@ -10,6 +10,7 @@ function newContainer () { isDraggeable: true, isClickeable: false, isWheelable: false, + detectMouseOver: false, name: undefined, initialize: initialize, finalize: finalize, diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 56ce68e95..d234f61e5 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -27,9 +27,12 @@ function newFloatingSpace () { thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.isWheelable = true + thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.x = SIDE_PANEL_WIDTH thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = browserCanvas.width - SIDE_PANEL_WIDTH + thisObject.container.frame.height = browserCanvas.height let visible = false @@ -83,8 +86,6 @@ function newFloatingSpace () { if (visible === true) { return thisObject.container } - - return container } function physics () { @@ -102,7 +103,7 @@ function newFloatingSpace () { function drawBackground () { browserCanvasContext.beginPath() - browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) + browserCanvasContext.rect(thisObject.container.frame.position.x, thisObject.container.frame.position.y, thisObject.container.frame.width, thisObject.container.frame.height) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' browserCanvasContext.closePath() From b2c631c3125949484337986403252d11621e894e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 20:30:00 +0200 Subject: [PATCH 031/143] Could not get it without moving --- FloatingSpace/CircularMenu.js | 2 - FloatingSpace/CircularMenuItem.js | 2 +- FloatingSpace/FloatingLayer.js | 120 +++++++++--------------------- FloatingSpace/FloatingObject.js | 5 ++ FloatingSpace/StrategyPart.js | 4 +- 5 files changed, 42 insertions(+), 91 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index bf458d7b9..461419026 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -76,7 +76,6 @@ function newCircularMenu () { menutItem.isDeployed = true } thisObject.isDeployed = true - console.log('mouse over') } function onMouseNotOver () { @@ -86,7 +85,6 @@ function newCircularMenu () { menutItem.isDeployed = false } thisObject.isDeployed = false - console.log('mouse not over') } function drawBackground (pFloatingObject) { diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 52ebdedcc..83687751b 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -100,7 +100,7 @@ function newCircularMenuItem () { } function drawBackground () { - if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true) { + if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) { let position = { x: 0, y: 0 diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index ff6c93287..6208366ef 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -16,7 +16,6 @@ function newFloatingLayer () { const MODULE_NAME = 'Floating Layer' const INFO_LOG = false - let INTENSIVE_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -307,8 +306,6 @@ function newFloatingLayer () { function drawVisibleObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawVisibleObjects -> Entering function.') } - /* We draw all the visibleFloatingObjects. */ for (let i = 0; i < visibleFloatingObjects.length; i++) { @@ -323,14 +320,11 @@ function newFloatingLayer () { makeVisible() } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err= ' + err.stack) } } } function makeVisible () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeVisible -> Entering function.') } - /* Now we check if any of the created FloatingObjects where enabled to run under the Physics Engine. */ for (let i = 0; i < invisibleFloatingObjects.length; i++) { @@ -366,8 +360,6 @@ function newFloatingLayer () { } if (payload.visible === true) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } - /* The first time that the floatingObject becomes visible, we need to do this. */ floatingObject.radomizeCurrentPosition(payload.position) @@ -375,16 +367,8 @@ function newFloatingLayer () { visibleFloatingObjects.push(floatingObject) - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - invisibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - return // Only one at the time. } } @@ -397,8 +381,6 @@ function newFloatingLayer () { function makeInvisible () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeInvisible -> Entering function.') } - /* Finally we check if any of the currently visible floatingObjects has become invisible and must be removed from the Physics Engine. */ for (let i = 0; i < visibleFloatingObjects.length; i++) { @@ -429,20 +411,10 @@ function newFloatingLayer () { } if (payload.visible === false) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } - invisibleFloatingObjects.push(floatingObject) - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - visibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - return // Only one at the time. } } @@ -455,8 +427,6 @@ function newFloatingLayer () { function drawDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawDyingObjects -> Entering function.') } - /* We also draw all the dyingFloatingObjects */ for (let i = 0; i < dyingFloatingObjects.length; i++) { @@ -496,31 +466,23 @@ function newFloatingLayer () { */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Entering function.') } - applyPhysics() function applyPhysics () { /* This function makes all the calculations to apply phisycs on all visible floatingObjects in this layer. */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> applyPhysics -> Entering function.') } - for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[i] - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Change position based on speed.') } - - floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x - floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Apply some friction to desaccelerate.') } + if (floatingObject.positionLocked === false) { + floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x + floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y + } floatingObject.currentSpeed.x = floatingObject.currentSpeed.x * floatingObject.friction // Desaceleration factor. floatingObject.currentSpeed.y = floatingObject.currentSpeed.y * floatingObject.friction // Desaceleration factor. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Gives a minimun speed towards their taget.') } - let payload = { position: undefined, visible: false @@ -561,8 +523,6 @@ function newFloatingLayer () { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Set a maximun speed.') } - const MAX_SPEED = 50 if (floatingObject.currentSpeed.x > MAX_SPEED) { @@ -610,8 +570,6 @@ function newFloatingLayer () { function animateDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> animateDyingObjects -> Entering function.') } - /* We animate some parts of the dying objects */ for (let i = 0; i < dyingFloatingObjects.length; i++) { @@ -639,8 +597,6 @@ function newFloatingLayer () { function gravityForce (floatingObject, payload) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] gravityForce -> Entering function.') } - /* We simulate a kind of gravity towards the target point of each floatingObject. This force will make the floatingObject to keep pushing to reach that point. */ const coulomb = 0.00001 @@ -669,20 +625,22 @@ function newFloatingLayer () { y: pos2.y - pos1.y } - var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. - x: posDiff.x / d, - y: posDiff.y / d + if (d !== 0) { + var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. + x: posDiff.x / d, + y: posDiff.y / d + } + + var forceVector = { + x: unitVector.x * force, + y: unitVector.y * force + } + + /* We add the force vector to the speed vector */ + + floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x + floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } - - var forceVector = { - x: unitVector.x * force, - y: unitVector.y * force - } - - /* We add the force vector to the speed vector */ - - floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x - floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err= ' + err.stack) } } @@ -690,8 +648,6 @@ function newFloatingLayer () { function currentRepulsionForce (currentFloatingObject) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] currentRepulsionForce -> Entering function.') } - /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ const coulomb = 2 @@ -754,8 +710,6 @@ function newFloatingLayer () { function targetRepulsionForce (currentFloatingObject) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] targetRepulsionForce -> Entering function.') } - /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ const coulomb = 2 @@ -815,20 +769,22 @@ function newFloatingLayer () { y: pos2.y - pos1.y } - var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. - x: posDiff.x / d, - y: posDiff.y / d + if (d !== 0) { + var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. + x: posDiff.x / d, + y: posDiff.y / d + } + + var forceVector = { + x: unitVector.x * force, + y: unitVector.y * force + } + + /* We substract the force vector to the speed vector of the current floatingObject */ + + floatingObject1.currentSpeed.x = floatingObject1.currentSpeed.x - forceVector.x + floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } - - var forceVector = { - x: unitVector.x * force, - y: unitVector.y * force - } - - /* We substract the force vector to the speed vector of the current floatingObject */ - - floatingObject1.currentSpeed.x = floatingObject1.currentSpeed.x - forceVector.x - floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err= ' + err.stack) } @@ -837,8 +793,6 @@ function newFloatingLayer () { function changeTargetRepulsion (pDelta) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] changeTargetRepulsion -> Entering function.') } - if (pDelta > 0) { pDelta = 1 } else { @@ -857,8 +811,6 @@ function newFloatingLayer () { function colliding (floatingObject1, floatingObject2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] colliding -> Entering function.') } - /* This function detects weather 2 floatingObjects collide with each other. */ var r1 = floatingObject1.container.frame.radius @@ -883,8 +835,6 @@ function newFloatingLayer () { function distance (x1, y1, x2, y2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] distance -> Entering function.') } - return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } @@ -893,8 +843,6 @@ function newFloatingLayer () { function resolveCollision (floatingObject1, floatingObject2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] resolveCollision -> Entering function.') } - /* This function changes speed and position of floatingObjects that are in collision */ var collisionision_angle = Math.atan2((floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y), (floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x)) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 11557b0b0..4db202c68 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -11,6 +11,7 @@ function newFloatingObject () { let thisObject = { physics: physics, + positionLocked: false, payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. @@ -168,6 +169,8 @@ function newFloatingObject () { thisObject.targetFontSize = thisObject.rawFontSize * 2.0 thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) + + thisObject.positionLocked = true } function onMouseNotOver (point) { @@ -176,6 +179,8 @@ function newFloatingObject () { thisObject.targetFontSize = thisObject.rawFontSize * 1 thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point) + + thisObject.positionLocked = false } function onMouseClick (pPoint) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 77747bc87..e7feb426b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -399,7 +399,7 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius / 3 - fontSize * FONT_ASPECT_RATIO - 10 + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -412,7 +412,7 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius / 3 + fontSize * FONT_ASPECT_RATIO + 15 + y: position.y + radius * 1 / 2 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY From d0cb562b2b8ea0acba290191404331323c86c72b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 20:45:34 +0200 Subject: [PATCH 032/143] Target line shown again --- FloatingSpace/FloatingLayer.js | 8 ++++++-- FloatingSpace/FloatingObject.js | 1 - FloatingSpace/StrategyPart.js | 11 ++++------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 6208366ef..413ea80ec 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -910,8 +910,12 @@ function newFloatingLayer () { pos2.x = pos2.x - minTD.x * (im2 / (im1 + im2)) pos2.y = pos2.y - minTD.y * (im2 / (im1 + im2)) - floatingObject1.container.frame.position = pos1 - floatingObject2.container.frame.position = pos2 + if (floatingObject1.positionLocked === false) { + floatingObject1.container.frame.position = pos1 + } + if (floatingObject2.positionLocked === false) { + floatingObject2.container.frame.position = pos2 + } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err= ' + err.stack) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4db202c68..12d00d38f 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -290,4 +290,3 @@ function newFloatingObject () { } } - diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index e7feb426b..d4c1f9a10 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -291,9 +291,8 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - if (isMouseOver === false) { - drawPartBackground(pFloatingObject) - } + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() } @@ -303,10 +302,8 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - if (isMouseOver === false) { - pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y - } + pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y /* Here I continue painting the background */ From fb9448220b6c201010bdc334ba46ea79f035bae8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 20:51:49 +0200 Subject: [PATCH 033/143] Text Improved --- StrategySpace/StrategyCollectionItem.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 182338665..dc808e2dc 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -94,7 +94,7 @@ function newStrategyCollectionItem () { createPart('Strategy Entry', '', strategy.entryPoint, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] @@ -105,7 +105,7 @@ function newStrategyCollectionItem () { createPart('Strategy Exit', '', strategy.exitPoint, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] @@ -116,7 +116,7 @@ function newStrategyCollectionItem () { createPart('Trade Entry', '', strategy.sellPoint, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] From e6a462fd72f77d9b5eb2ef9f509b99c2048403f2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 21:17:55 +0200 Subject: [PATCH 034/143] Ready for Click --- FloatingSpace/CircularMenuItem.js | 28 ++++++++++++++++------------ FloatingSpace/StrategyPart.js | 17 +++++++++++++---- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 83687751b..d04fa8ee5 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -79,7 +79,7 @@ function newCircularMenuItem () { } } - thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius + thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5 thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2 } @@ -108,24 +108,28 @@ function newCircularMenuItem () { position = thisObject.container.frame.frameThisPoint(position) - browserCanvasContext.beginPath() - - browserCanvasContext.rect(position.x, position.y, thisObject.container.frame.width, thisObject.container.frame.height) - - if (isMouseOver === true) { - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' - } else { - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 0.5)' + let params = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.RED, + castShadow: false } - browserCanvasContext.closePath() - browserCanvasContext.fill() + if (isMouseOver === true) { + params.opacity = 1 + } else { + params.opacity = 0.8 + } + + roundedCornersBackground(params) } } function drawForeground () { let menuPosition = { - x: thisObject.currentRadius, + x: thisObject.currentRadius * 1.5, y: thisObject.container.frame.height / 2 } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d4c1f9a10..30aa2b387 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -291,9 +291,13 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - drawPartBackground(pFloatingObject) + if (isMouseOver === false) { + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() - thisObject.menu.drawBackground() + drawPartForeground(pFloatingObject) + thisObject.menu.drawForeground() + } } function drawPartBackground (pFloatingObject) { @@ -339,8 +343,13 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { - drawPartForeground(pFloatingObject) - thisObject.menu.drawForeground() + if (isMouseOver === true) { + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() + + drawPartForeground(pFloatingObject) + thisObject.menu.drawForeground() + } } function drawPartForeground (pFloatingObject) { From 17c2fb59d07fb8241f3209452357376563c13b73 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 08:53:59 +0200 Subject: [PATCH 035/143] low level BUG in Frame fixed --- FloatingSpace/CircularMenuItem.js | 13 ++----- Frame.js | 60 +++++++++++++++++++++++++------ 2 files changed, 53 insertions(+), 20 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index d04fa8ee5..f02a8ab08 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -24,8 +24,9 @@ function newCircularMenuItem () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.isClickeable = false + thisObject.container.isClickeable = true thisObject.container.isDraggeable = false + thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 @@ -96,18 +97,11 @@ function newCircularMenuItem () { } function onMouseClick (event) { - + console.log('Menu item clicked') } function drawBackground () { if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) { - let position = { - x: 0, - y: 0 - } - - position = thisObject.container.frame.frameThisPoint(position) - let params = { cornerRadius: 3, lineWidth: 0.1, @@ -160,4 +154,3 @@ function newCircularMenuItem () { } } } - diff --git a/Frame.js b/Frame.js index f46f70630..24eab5872 100644 --- a/Frame.js +++ b/Frame.js @@ -65,25 +65,65 @@ function newFrame () { } function frameThisPoint (point) { - if (thisObject.parentFrame !== undefined) { - point = thisObject.parentFrame.frameThisPoint(point) + /* We need not to modify the point received, so me make a copy of it. */ + + let checkPoint = { + x: point.x, + y: point.y } - point.x = point.x + thisObject.position.x - point.y = point.y + thisObject.position.y + let parentPoint = { + x: 0, + y: 0 + } - return point + let returnPoint = { + x: 0, + y: 0 + } + + if (thisObject.parentFrame !== undefined) { + parentPoint = thisObject.parentFrame.frameThisPoint(checkPoint) + + returnPoint.x = parentPoint.x + thisObject.position.x + returnPoint.y = parentPoint.y + thisObject.position.y + } else { + returnPoint.x = checkPoint.x + thisObject.position.x + returnPoint.y = checkPoint.y + thisObject.position.y + } + + return returnPoint } function unframeThisPoint (point) { - if (thisObject.parentFrame !== undefined) { - point = thisObject.parentFrame.unframeThisPoint(point) + /* We need not to modify the point received, so me make a copy of it. */ + + let checkPoint = { + x: point.x, + y: point.y } - point.x = point.x - thisObject.position.x - point.y = point.y - thisObject.position.y + let parentPoint = { + x: 0, + y: 0 + } - return point + let returnPoint = { + x: 0, + y: 0 + } + + if (thisObject.parentFrame !== undefined) { + parentPoint = thisObject.parentFrame.unframeThisPoint(checkPoint) + + returnPoint.x = parentPoint.x - thisObject.position.x + returnPoint.y = parentPoint.y - thisObject.position.y + } else { + returnPoint.x = checkPoint.x - thisObject.position.x + returnPoint.y = checkPoint.y - thisObject.position.y + } + + return returnPoint } function canYouMoveHere (tempDisplacement) { From 9dfd5f3e8d7cc26dff6030c55cc3dd0ced931959 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 09:20:23 +0200 Subject: [PATCH 036/143] Focus removed correctly --- FloatingSpace/FloatingObject.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 12d00d38f..13b2eced3 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -103,7 +103,10 @@ function newFloatingObject () { thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + + /* To consider that this object lost the focus, we monitor the space for 2 key events */ + canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) + canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { @@ -171,14 +174,25 @@ function newFloatingObject () { thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) thisObject.positionLocked = true + canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container) } - function onMouseNotOver (point) { + function mouseOverFlotingSpace (point) { + removeFocus() + } + + function someoneAquiredFocus (container) { + if (container.id !== thisObject.container.id) { + removeFocus() + } + } + + function removeFocus () { thisObject.targetRadius = thisObject.rawRadius * 1 thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point) + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver') thisObject.positionLocked = false } From fdaf32227812ee55eba4126786eda1df54a4c9b3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 10:41:14 +0200 Subject: [PATCH 037/143] Menu Item Click Working! --- Container.js | 34 ++++++++++++++++++++++++++++++- FloatingSpace/CircularMenu.js | 10 ++++----- FloatingSpace/CircularMenuItem.js | 4 ++-- FloatingSpace/FloatingObject.js | 33 +++++++++++++++++++----------- FloatingSpace/StrategyPart.js | 26 +++++++++++------------ 5 files changed, 73 insertions(+), 34 deletions(-) diff --git a/Container.js b/Container.js index 7a49461ab..b5d2872df 100644 --- a/Container.js +++ b/Container.js @@ -25,12 +25,16 @@ function newContainer () { let onDimmensionsChangedParentEvent = false let onMouseOverParentEvent = false let onMouseNotOverParentEvent = false + let onFocusParentEvent = false + let onNotFocusParentEvent = false let isConnectedToParent = false let dimensionsChangedEventSubscriptionId let onMouseOverEventSubscriptionId let onMouseNotOverEventSubscriptionId + let onFocusEventSubscriptionId + let onNotFocusEventSubscriptionId return thisObject @@ -39,6 +43,8 @@ function newContainer () { thisObject.parentContainer.eventHandler.stopListening(dimensionsChangedEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onMouseOverEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) + thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId) + thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId) } } @@ -59,7 +65,17 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight, onRadius, onDimmensionsChangedEvent, onMouseOverEvent, onMouseNotOverEvent) { + function connectToParent ( + parentContainer, + onWidth, + onHeight, + onRadius, + onDimmensionsChangedEvent, + onMouseOverEvent, + onMouseNotOverEvent, + onFocusEvent, + onNotFocusEvent + ) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight connectedToParentRadius = onRadius @@ -67,6 +83,8 @@ function newContainer () { onDimmensionsChangedParentEvent = onDimmensionsChangedEvent onMouseOverParentEvent = onMouseOverEvent onMouseNotOverParentEvent = onMouseNotOverEvent + onFocusParentEvent = onFocusEvent + onNotFocusParentEvent = onNotFocusEvent isConnectedToParent = true @@ -83,6 +101,12 @@ function newContainer () { if (onMouseNotOverParentEvent === true) { onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } + if (onFocusParentEvent === true) { + onFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onFocus', onFocus) + } + if (onNotFocusParentEvent === true) { + onNotFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onNotFocus', onNotFocus) + } if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -123,6 +147,14 @@ function newContainer () { thisObject.eventHandler.raiseEvent('onMouseNotOver', event) } + function onFocus (event) { + thisObject.eventHandler.raiseEvent('onFocus', event) + } + + function onNotFocus (event) { + thisObject.eventHandler.raiseEvent('onNotFocus', event) + } + function isForThisPurpose (purpose) { if (purpose !== undefined) { switch (purpose) { diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 461419026..a54d3729b 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -42,12 +42,12 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true, true, true, true) + menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) menuItems.push(menuItem) } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) } function getContainer (point) { @@ -69,7 +69,7 @@ function newCircularMenu () { } } - function onMouseOver () { + function onFocus () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 1.5 @@ -78,7 +78,7 @@ function newCircularMenu () { thisObject.isDeployed = true } - function onMouseNotOver () { + function onNotFocus () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5 diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index f02a8ab08..f0e7899f5 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -55,15 +55,15 @@ function newCircularMenuItem () { thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn thisObject.icon = thisObject.iconOn // The default value is ON. - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { let container if (thisObject.isDeployed === true) { - if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { return thisObject.container } else { return undefined diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 13b2eced3..30cccdf24 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -12,6 +12,7 @@ function newFloatingObject () { physics: physics, positionLocked: false, + isOnFocus: false, payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. @@ -89,7 +90,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, true, true) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) break } default: { @@ -167,14 +168,18 @@ function newFloatingObject () { } function onMouseOver (point) { - thisObject.targetRadius = thisObject.rawRadius * 6.0 - thisObject.targetImageSize = thisObject.rawImageSize * 2.0 - thisObject.targetFontSize = thisObject.rawFontSize * 2.0 + if (thisObject.isOnFocus === false) { + thisObject.targetRadius = thisObject.rawRadius * 6.0 + thisObject.targetImageSize = thisObject.rawImageSize * 2.0 + thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) + thisObject.underlayingObject.container.eventHandler.raiseEvent('onFocus', point) - thisObject.positionLocked = true - canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container) + thisObject.positionLocked = true + + canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container) + thisObject.isOnFocus = true + } } function mouseOverFlotingSpace (point) { @@ -188,13 +193,16 @@ function newFloatingObject () { } function removeFocus () { - thisObject.targetRadius = thisObject.rawRadius * 1 - thisObject.targetImageSize = thisObject.rawImageSize * 1 - thisObject.targetFontSize = thisObject.rawFontSize * 1 + if (thisObject.isOnFocus === true) { + thisObject.targetRadius = thisObject.rawRadius * 1 + thisObject.targetImageSize = thisObject.rawImageSize * 1 + thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver') + thisObject.underlayingObject.container.eventHandler.raiseEvent('onNotFocus') - thisObject.positionLocked = false + thisObject.positionLocked = false + thisObject.isOnFocus = false + } } function onMouseClick (pPoint) { @@ -304,3 +312,4 @@ function newFloatingObject () { } } + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 30aa2b387..1602a60d4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -5,6 +5,7 @@ function newStrategyPart () { let thisObject = { type: undefined, menu: undefined, + isOnFocus: false, container: undefined, physics: physics, drawBackground: drawBackground, @@ -22,7 +23,6 @@ function newStrategyPart () { thisObject.container.frame.position.y = 0 let floatingLayer - let isMouseOver = false let image let imagePath @@ -240,7 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) - thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, true, true) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) /* Load Part Image */ @@ -254,9 +254,9 @@ function newStrategyPart () { image.src = window.canvasApp.urlPrefix + imagePath } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -276,14 +276,12 @@ function newStrategyPart () { thisObject.menu.physics() } - function onMouseOver () { - // thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') - isMouseOver = true + function onFocus () { + thisObject.isOnFocus = true } - function onMouseNotOver () { - // thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') - isMouseOver = false + function onNotFocus () { + thisObject.isOnFocus = false } function onMouseClick (event) { @@ -291,7 +289,7 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - if (isMouseOver === false) { + if (thisObject.isOnFocus === false) { drawPartBackground(pFloatingObject) thisObject.menu.drawBackground() @@ -343,7 +341,7 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { - if (isMouseOver === true) { + if (thisObject.isOnFocus === true) { drawPartBackground(pFloatingObject) thisObject.menu.drawBackground() @@ -390,7 +388,7 @@ function newStrategyPart () { /* Label Text */ - if (radius > 6 && isMouseOver === true) { + if (radius > 6 && thisObject.isOnFocus === true) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint @@ -415,7 +413,7 @@ function newStrategyPart () { label = pFloatingObject.payload.profile.downLabel - if (label !== undefined && isMouseOver === true) { + if (label !== undefined && thisObject.isOnFocus === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, y: position.y + radius * 1 / 2 + fontSize * FONT_ASPECT_RATIO + 15 From 7de9979f56a1f13bde3667c598e355ea21f9490a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 12:17:42 +0200 Subject: [PATCH 038/143] payload properly shared --- FloatingSpace/CircularMenu.js | 6 ++++-- FloatingSpace/CircularMenuItem.js | 6 ++++-- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPart.js | 6 ++++-- FloatingSpace/StrategyParts.js | 2 +- StrategySpace/StrategyCollectionItem.js | 11 +++++++---- 6 files changed, 21 insertions(+), 12 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index a54d3729b..9b46af711 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -22,10 +22,12 @@ function newCircularMenu () { let menuItemsInitialValues = [] let menuItems = [] + let payload return thisObject - function initialize (menuItemsInitialValues) { + function initialize (menuItemsInitialValues, pPayload) { + payload = pPayload /* Create the array of Menu Items */ for (let i = 0; i < menuItemsInitialValues.length; i++) { @@ -41,7 +43,7 @@ function newCircularMenu () { menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle - menuItem.initialize() + menuItem.initialize(payload) menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) menuItems.push(menuItem) } diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index f0e7899f5..cf0df353e 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -34,10 +34,12 @@ function newCircularMenuItem () { thisObject.container.frame.height = 30 let isMouseOver = false + let payload return thisObject - function initialize () { + function initialize (pPayload) { + payload = pPayload /* Load Menu Images */ thisObject.iconOn = new Image() @@ -97,7 +99,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - console.log('Menu item clicked') + payload.onMenuItemClick(payload) } function drawBackground () { diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 30cccdf24..0e7cb7824 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -89,7 +89,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType) + thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) break } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 1602a60d4..3228c90ba 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -25,10 +25,12 @@ function newStrategyPart () { let floatingLayer let image let imagePath + let payload return thisObject - function initialize (pFloatingLayer, pType) { + function initialize (pFloatingLayer, pType, pPayload) { + payload = pPayload floatingLayer = pFloatingLayer let menuItemsInitialValues = [] @@ -239,7 +241,7 @@ function newStrategyPart () { } thisObject.menu = newCircularMenu() - thisObject.menu.initialize(menuItemsInitialValues) + thisObject.menu.initialize(menuItemsInitialValues, payload) thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) /* Load Part Image */ diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index da2a6bb88..9726c15a6 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -35,12 +35,12 @@ function newStrategyParts () { function createNewStrategyPart (type, pPayload, callBackFunction) { let floatingObject = newFloatingObject() + floatingObject.payload = pPayload floatingObject.initialize('Strategy Part', type, floatingLayer, onInitialized) floatingObject.underlayingObject.type = type function onInitialized (err) { const FRICTION = 0.97 - floatingObject.payload = pPayload switch (type) { case 'Strategy': { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index dc808e2dc..a954d5868 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -50,6 +50,11 @@ function newStrategyCollectionItem () { } } + function onMenuItemClick (payload) { + console.log('onMenuItemClick') + payload.profile.upLabel = payload.profile.upLabel + '1' + } + function createPart (partType, name, node, parentNode, title) { let payload = { profile: { @@ -62,8 +67,6 @@ function newStrategyCollectionItem () { notes: [] } - let imageId // 'My Image.png' - if (title !== undefined) { payload.profile.upLabel = title } else { @@ -71,9 +74,9 @@ function newStrategyCollectionItem () { } payload.profile.downLabel = name + payload.node = node payload.parentNode = parentNode - - node.payload = payload + payload.onMenuItemClick = onMenuItemClick canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated) From cf30ff38a2743b2cf3ad81bedb0c7745844412a3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 12:39:04 +0200 Subject: [PATCH 039/143] action added --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 3 ++- FloatingSpace/StrategyPart.js | 29 ++++++++++----------- StrategySpace/StrategyCollectionItem.js | 34 +++++++++++++++++++++++-- 4 files changed, 49 insertions(+), 18 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 9b46af711..6c2af8b94 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -34,6 +34,7 @@ function newCircularMenu () { let menuItem = newCircularMenuItem() let menuItemInitialValue = menuItemsInitialValues[i] + menuItem.action = menuItemInitialValue.action menuItem.label = menuItemInitialValue.label menuItem.visible = menuItemInitialValue.visible menuItem.imagePathOn = menuItemInitialValue.imagePathOn diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index cf0df353e..4e63c5af7 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -6,6 +6,7 @@ function newCircularMenuItem () { isDeployed: undefined, iconOn: undefined, iconOff: undefined, + action: undefined, label: undefined, visible: false, imagePathOn: undefined, @@ -99,7 +100,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - payload.onMenuItemClick(payload) + payload.onMenuItemClick(payload, action) } function drawBackground () { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3228c90ba..f271c77b4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -39,6 +39,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ { + action: 'Open Settings', label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', @@ -49,6 +50,7 @@ function newStrategyPart () { angle: 20 }, { + action: 'Delete Strategy', label: 'Delete This Strategy', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -64,6 +66,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -79,6 +82,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/support.png' menuItemsInitialValues = [ { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -94,21 +98,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/compass.png' menuItemsInitialValues = [ { - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Trade Exit': { - imagePath = 'Images/icons/style-01/broken-link.png' - menuItemsInitialValues = [ - { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -124,6 +114,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/pixel.png' menuItemsInitialValues = [ { + action: 'Add Phase', label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -139,6 +130,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/competition.png' menuItemsInitialValues = [ { + action: 'Add Phase', label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -154,6 +146,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/placeholder.png' menuItemsInitialValues = [ { + action: 'Edit Code', label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -164,6 +157,7 @@ function newStrategyPart () { angle: 40 }, { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -174,6 +168,7 @@ function newStrategyPart () { angle: 0 }, { + action: 'Delete Phase', label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -189,6 +184,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/attractive.png' menuItemsInitialValues = [ { + action: 'Add Condition', label: 'Add Condition', visible: false, imagePathOn: 'Images/icons/style-01/testing.png', @@ -199,6 +195,7 @@ function newStrategyPart () { angle: 20 }, { + action: 'Delete Situation', label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -214,6 +211,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/testing.png' menuItemsInitialValues = [ { + action: 'Edit Code', label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -224,6 +222,7 @@ function newStrategyPart () { angle: 20 }, { + action: 'Delete Condition', label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index a954d5868..a7cf84372 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -50,8 +50,38 @@ function newStrategyCollectionItem () { } } - function onMenuItemClick (payload) { - console.log('onMenuItemClick') + function onMenuItemClick (payload, action) { + console.log('onMenuItemClick ' + action) + + switch (action) { + case 'Open Settings': + + break + case 'Delete Strategy': + + break + case 'Add Situation': + + break + case 'Add Phase': + + break + case 'Edit Code': + + break + case 'Delete Phase': + + break + case 'Delete Situation': + + break + case 'Delete Condition': + + break + default: + + } + payload.profile.upLabel = payload.profile.upLabel + '1' } From 29aed3f4a227884c4d9570ab7ad1d65b453b81a4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 13:41:22 +0200 Subject: [PATCH 040/143] Deleting sutuation without removing floating object --- FloatingSpace/CircularMenuItem.js | 3 ++- StrategySpace/StrategyCollectionItem.js | 9 ++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 4e63c5af7..4be819d05 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -100,7 +100,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - payload.onMenuItemClick(payload, action) + payload.onMenuItemClick(payload, thisObject.action) } function drawBackground () { @@ -157,3 +157,4 @@ function newCircularMenuItem () { } } } + diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index a7cf84372..957d8652f 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -73,7 +73,13 @@ function newStrategyCollectionItem () { break case 'Delete Situation': - + for (let i = 0; i < payload.parentNode.situations.length; i++) { + let situation = payload.parentNode.situations[i] + if (situation.name === payload.node.name) { + payload.parentNode.situations.splice(i) + return + } + } break case 'Delete Condition': @@ -396,3 +402,4 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } + From f70292fd1f3285f74c3abc73d25549d5b43f3d1e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 14:01:34 +0200 Subject: [PATCH 041/143] profile deleted from payload --- FloatingSpace/FloatingLayer.js | 16 ++++++++-------- FloatingSpace/ProfileBall.js | 4 ++-- FloatingSpace/StrategyPart.js | 12 ++++++------ StrategySpace/StrategyCollectionItem.js | 19 +++++++------------ 4 files changed, 23 insertions(+), 28 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 413ea80ec..95f18f03f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -227,8 +227,8 @@ function newFloatingLayer () { payload.profile = { position: { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y + x: pFloatingObject.payload.position.x, + y: pFloatingObject.payload.position.y }, visible: pFloatingObject.payload.profile.visible, botAvatar: pFloatingObject.payload.profile.botAvatar @@ -350,8 +350,8 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible + payload.position = floatingObject.payload.position + payload.visible = floatingObject.payload.visible break } default: { @@ -402,7 +402,7 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.visible = floatingObject.payload.profile.visible + payload.visible = floatingObject.payload.visible break } default: { @@ -502,8 +502,8 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible + payload.position = floatingObject.payload.position + payload.visible = floatingObject.payload.visible break } default: { @@ -736,7 +736,7 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.position = floatingObject2.payload.profile.position + payload.position = floatingObject2.payload.position break } default: { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 32a2c9b73..2e8c5c526 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -183,8 +183,8 @@ function newProfileBall () { function drawBackground (pFloatingObject) { let point = { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y + x: pFloatingObject.payload.position.x, + y: pFloatingObject.payload.position.y } point = viewPort.fitIntoVisibleArea(point) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index f271c77b4..cda32802d 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -305,14 +305,14 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y + pFloatingObject.payload.position.x = parentFloatingObject.container.frame.position.x + pFloatingObject.payload.position.y = parentFloatingObject.container.frame.position.y /* Here I continue painting the background */ let point = { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y + x: pFloatingObject.payload.position.x, + y: pFloatingObject.payload.position.y } if (pFloatingObject.container.frame.radius > 1) { @@ -399,7 +399,7 @@ function newStrategyPart () { let label - label = pFloatingObject.payload.profile.upLabel + label = pFloatingObject.payload.upLabel if (label !== undefined) { labelPoint = { @@ -412,7 +412,7 @@ function newStrategyPart () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - label = pFloatingObject.payload.profile.downLabel + label = pFloatingObject.payload.downLabel if (label !== undefined && thisObject.isOnFocus === true) { labelPoint = { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 957d8652f..928a3b384 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -87,29 +87,24 @@ function newStrategyCollectionItem () { default: } - - payload.profile.upLabel = payload.profile.upLabel + '1' } function createPart (partType, name, node, parentNode, title) { let payload = { - profile: { - position: { - x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, - y: viewPort.height / 2 - }, - visible: true + position: { + x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, + y: viewPort.height / 2 }, - notes: [] + visible: true } if (title !== undefined) { - payload.profile.upLabel = title + payload.upLabel = title } else { - payload.profile.upLabel = partType + payload.upLabel = partType } - payload.profile.downLabel = name + payload.downLabel = name payload.node = node payload.parentNode = parentNode payload.onMenuItemClick = onMenuItemClick From 29a349b50d5d0094d59943597efb8e7a05b656ce Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 14:10:06 +0200 Subject: [PATCH 042/143] Cleaning Floating Object --- FloatingSpace/FloatingObject.js | 38 ++++++--------------------------- 1 file changed, 7 insertions(+), 31 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 0e7cb7824..4ec78d3b8 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -9,54 +9,31 @@ function newFloatingObject () { logger.fileName = MODULE_NAME let thisObject = { - - physics: physics, positionLocked: false, isOnFocus: false, - payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. underlayingObject: undefined, - - physicsEnabled: false, - + currentSpeed: 0, // This is the current speed of the floating object. + currentMass: 0, // This is the current mass of the floating object, including its zoom applied. + friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. + rawMass: 0, // This is the mass value without zoom. + rawRadius: 0, // This is the radius of this floating object without zoom. + targetRadius: 0, // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value. + physics: physics, initializeMass: initializeMass, initializeRadius: initializeRadius, initializeImageSize: initializeImageSize, initializeFontSize: initializeFontSize, - - imageId: undefined, - - currentSpeed: 0, // This is the current speed of the floating object. - currentMass: 0, // This is the current mass of the floating object, including its zoom applied. - - friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. - - rawMass: 0, // This is the mass value without zoom. - rawRadius: 0, // This is the radius of this floating object without zoom. - - targetRadius: 0, // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value. - - fillStyle: '', - - labelStrokeStyle: '', - radomizeCurrentPosition: radomizeCurrentPosition, radomizeCurrentSpeed: radomizeCurrentSpeed, - drawBackground: drawBackground, drawForeground: drawForeground, - updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. - - linkedObject: undefined, // This is a reference to the object that this floating object is representing. - linkedObjectType: '', // Since there might be floating objects for different types of objects, here we store the type of object we are linking to. - getContainer: getContainer, container: undefined, initialize: initialize - } thisObject.container = newContainer() @@ -312,4 +289,3 @@ function newFloatingObject () { } } - From 297d2d500feb8249fff58ed9801a6812dad2c0b7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 14:39:30 +0200 Subject: [PATCH 043/143] Simplifying Code --- FloatingSpace/FloatingObject.js | 74 ++++---- FloatingSpace/NoteSets.js | 42 +++-- FloatingSpace/ProfileBalls.js | 24 ++- FloatingSpace/StrategyParts.js | 215 ++++++++++++------------ StrategySpace/StrategyCollectionItem.js | 6 +- 5 files changed, 164 insertions(+), 197 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4ec78d3b8..ccff86ceb 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -1,8 +1,6 @@ function newFloatingObject () { const MODULE_NAME = 'Floating Object' - const INFO_LOG = false - const INTENSIVE_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() @@ -47,50 +45,41 @@ function newFloatingObject () { return thisObject - function initialize (pType, pSubType, floatingLayer, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function initialize (pType, pSubType, floatingLayer) { + switch (pType) { - switch (pType) { - - case 'Profile Ball': { - thisObject.underlayingObject = newProfileBall() - thisObject.underlayingObject.initialize() - break - } - case 'Note': { - thisObject.underlayingObject = newNote() - thisObject.underlayingObject.initialize() - break - } - - case 'Strategy Part': { - thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - break - } + case 'Profile Ball': { + thisObject.underlayingObject = newProfileBall() + thisObject.underlayingObject.initialize() + break + } + case 'Note': { + thisObject.underlayingObject = newNote() + thisObject.underlayingObject.initialize() + break } - thisObject.type = pType + case 'Strategy Part': { + thisObject.underlayingObject = newStrategyPart() + thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + break + } + } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.type = pType + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) /* To consider that this object lost the focus, we monitor the space for 2 key events */ - canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) - canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } + canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) + canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) } function getContainer (point) { @@ -279,13 +268,8 @@ function newFloatingObject () { function updateMass () { - // thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM; - } function updateRadius () { - - // thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR; - } } diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index c10eb6121..50a2f7c3b 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -225,21 +225,18 @@ function newNoteSets () { */ let floatingObject = newFloatingObject() - floatingObject.initialize('Note', '', floatingLayer, onInitialized) + floatingObject.initialize('Note', '', floatingLayer) - function onInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Entering function.') } + floatingObject.payload = noteSet.payload + floatingObject.payloadNoteIndex = i + floatingObject.payloadImageId = noteSet.imageId - floatingObject.payload = noteSet.payload - floatingObject.payloadNoteIndex = i - floatingObject.payloadImageId = noteSet.imageId + floatingObject.friction = 0.995 - floatingObject.friction = 0.995 - - floatingObject.initializeMass(200) + floatingObject.initializeMass(200) // let bodyText = pNewNotes[i].body; - let radius + let radius /* if (bodyText.length < 100) { @@ -248,27 +245,26 @@ function newNoteSets () { radius = bodyText.length; } */ - radius = 50 + radius = 50 - floatingObject.initializeRadius(radius) - floatingObject.initializeImageSize(15) + floatingObject.initializeRadius(radius) + floatingObject.initializeImageSize(15) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' - floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' - floatingLayer.addFloatingObject(floatingObject) + floatingLayer.addFloatingObject(floatingObject) - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> New Note added to Layer.') } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> New Note added to Layer.') } - plotterNote.floatingHandle = floatingObject.handle + plotterNote.floatingHandle = floatingObject.handle - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> plotterNote.floatingHandle = ' + plotterNote.floatingHandle) } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> plotterNote.floatingHandle = ' + plotterNote.floatingHandle) } - newFloatingNotes.push(plotterNote) + newFloatingNotes.push(plotterNote) - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Added to newFloatingNotes.') } - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> newFloatingNotes.length = ' + newFloatingNotes.length) } - } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Added to newFloatingNotes.') } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> newFloatingNotes.length = ' + newFloatingNotes.length) } } else { newFloatingNotes.push(floatingNote) diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 136e6d9be..98d4de498 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -36,25 +36,23 @@ function newProfileBalls () { function createNewProfileBall (pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', '', floatingLayer, onInitialized) + floatingObject.initialize('Profile Ball', '', floatingLayer) - function onInitialized (err) { - floatingObject.payload = pPayload + floatingObject.payload = pPayload - floatingObject.friction = 0.995 + floatingObject.friction = 0.995 - floatingObject.initializeMass(100) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) - floatingObject.initializeFontSize(10) + floatingObject.initializeMass(100) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' - floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' - floatingLayer.addFloatingObject(floatingObject) + floatingLayer.addFloatingObject(floatingObject) - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle) - } + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle) } function destroyProfileBall (pFloatingObjectHandle) { diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 9726c15a6..9f08b849a 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -5,12 +5,6 @@ function newStrategyParts () { const logger = newWebDebugLog() logger.fileName = MODULE_NAME - /* - - This object deals with Strategy Parts, a type of Floating Object that shows together with other parts a graphical representation of a strategy. - - */ - let thisObject = { createNewStrategyPart: createNewStrategyPart, @@ -33,122 +27,121 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (type, pPayload, callBackFunction) { + function createNewStrategyPart (type, pPayload) { let floatingObject = newFloatingObject() floatingObject.payload = pPayload - floatingObject.initialize('Strategy Part', type, floatingLayer, onInitialized) - floatingObject.underlayingObject.type = type + floatingObject.initialize('Strategy Part', type, floatingLayer) + floatingObject.underlayingObject.type = type // after initialize - function onInitialized (err) { - const FRICTION = 0.97 + const FRICTION = 0.97 - switch (type) { - case 'Strategy': { - level_1() - break - } - case 'Strategy Entry': { - level_2() - break - } - case 'Strategy Exit': { - level_2() - break - } - case 'Trade Entry': { - level_2() - break - } - case 'Trade Exit': { - level_2() - break - } - case 'Stop': { - level_2() - break - } - case 'Take Profit': { - level_2() - break - } - case 'Phase': { - level_3() - break - } - case 'Situation': { - level_4() - break - } - case 'Condition': { - level_5() - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) } - } + switch (type) { + case 'Strategy': { + level_1() + break } - - function level_1 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(100) - floatingObject.initializeRadius(45) - floatingObject.initializeImageSize(80) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + case 'Strategy Entry': { + level_2() + break } - - function level_2 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(50) - floatingObject.initializeRadius(40) - floatingObject.initializeImageSize(70) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' + case 'Strategy Exit': { + level_2() + break } - - function level_3 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(10) - floatingObject.initializeRadius(35) - floatingObject.initializeImageSize(60) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + case 'Trade Entry': { + level_2() + break } - - function level_4 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(10) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' + case 'Trade Exit': { + level_2() + break } - - function level_5 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(10) - floatingObject.initializeRadius(25) - floatingObject.initializeImageSize(30) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + case 'Stop': { + level_2() + break + } + case 'Take Profit': { + level_2() + break + } + case 'Phase': { + level_3() + break + } + case 'Situation': { + level_4() + break + } + case 'Condition': { + level_5() + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) } + return } - - floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - floatingLayer.addFloatingObject(floatingObject) - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) } + + function level_1 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(100) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + } + + function level_2 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(50) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' + } + + function level_3 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(35) + floatingObject.initializeImageSize(60) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + } + + function level_4 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' + } + + function level_5 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(25) + floatingObject.initializeImageSize(30) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + } + + floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + floatingLayer.addFloatingObject(floatingObject) + + return floatingObject.handle } function destroyStrategyPart (pFloatingObjectHandle) { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 928a3b384..7767eb20c 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -109,11 +109,7 @@ function newStrategyCollectionItem () { payload.parentNode = parentNode payload.onMenuItemClick = onMenuItemClick - canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated) - - function onStrategyPartCreated (err, pPartHandle) { - node.handle = pPartHandle - } + node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) } function destroyPart (node) { From 8feb3cd401b5a1ae7851adbd28803c51d7eee857 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 15:07:51 +0200 Subject: [PATCH 044/143] Strategy Object Implemented --- StrategySpace/Strategy.js | 261 ++++++++++++++++++++++++ StrategySpace/StrategyCollection.js | 3 +- StrategySpace/StrategyCollectionItem.js | 237 +-------------------- 3 files changed, 271 insertions(+), 230 deletions(-) create mode 100644 StrategySpace/Strategy.js diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js new file mode 100644 index 000000000..be7a830b4 --- /dev/null +++ b/StrategySpace/Strategy.js @@ -0,0 +1,261 @@ + +function newStrategy () { + const MODULE_NAME = 'Strategy' + + let thisObject = { + strategySource: undefined, + container: undefined, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + thisObject.container.detectMouseOver = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = 0 + thisObject.container.frame.height = 0 + + return thisObject + + function finalize () { + destroyStrategyParts() + } + + function initialize (pStrategySource) { + thisObject.strategySource = pStrategySource + generateStrategyParts() + } + + function getContainer (point) { + + } + + function createPart (partType, name, node, parentNode, title) { + let payload = { + position: { + x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, + y: viewPort.height / 2 + }, + visible: true + } + + if (title !== undefined) { + payload.upLabel = title + } else { + payload.upLabel = partType + } + + payload.downLabel = name + payload.node = node + payload.parentNode = parentNode + payload.onMenuItemClick = onMenuItemClick + + node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) + } + + function destroyPart (node) { + canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) + } + + function generateStrategyParts () { + let lastPhase + let strategy = thisObject.strategySource + createPart('Strategy', strategy.name, strategy, undefined) + + createPart('Strategy Entry', '', strategy.entryPoint, strategy) + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + + createPart('Strategy Exit', '', strategy.exitPoint, strategy) + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + + createPart('Trade Entry', '', strategy.sellPoint, strategy) + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + + createPart('Stop', '', strategy.stopLoss, strategy) + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + + let parent + if (p === 0) { + parent = strategy.stopLoss + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + } + + createPart('Take Profit', '', strategy.buyOrder, strategy) + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + let parent + if (p === 0) { + parent = strategy.buyOrder + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + } + } + + function destroyStrategyParts () { + let strategy = thisObject.strategySource + destroyPart(strategy) + + destroyPart(strategy.entryPoint) + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.exitPoint) + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.sellPoint) + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.stopLoss) + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + destroyPart(strategy.stopLoss) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + } + + destroyPart(strategy.buyOrder) + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + destroyPart(strategy.buyOrder) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + } + } + + function onMenuItemClick (payload, action) { + console.log('onMenuItemClick ' + action) + + switch (action) { + case 'Open Settings': + + break + case 'Delete Strategy': + + break + case 'Add Situation': + + break + case 'Add Phase': + + break + case 'Edit Code': + + break + case 'Delete Phase': + + break + case 'Delete Situation': + for (let i = 0; i < payload.parentNode.situations.length; i++) { + let situation = payload.parentNode.situations[i] + if (situation.name === payload.node.name) { + payload.parentNode.situations.splice(i) + return + } + } + break + case 'Delete Condition': + + break + default: + + } + } +} diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 2069ae1dc..0713e7918 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -215,8 +215,7 @@ function newStrategyCollection () { let collectionItem = newStrategyCollectionItem() collectionItem.container.connectToParent(thisObject.container, false, false) - collectionItem.initialize() - collectionItem.strategy = strategy + collectionItem.initialize(strategy) collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN colletionItems.push(collectionItem) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 7767eb20c..01b8b9f90 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -2,6 +2,7 @@ function newStrategyCollectionItem () { const MODULE_NAME = 'Strategy Collection Item' let thisObject = { icon: undefined, + strategySource: undefined, strategy: undefined, container: undefined, draw: draw, @@ -21,7 +22,9 @@ function newStrategyCollectionItem () { return thisObject - function initialize () { + function initialize (strategy) { + thisObject.strategySource = strategy + const ITEM_WIDTH = SIDE_PANEL_WIDTH - 20 const ITEM_HEIGHT = 80 @@ -41,237 +44,16 @@ function newStrategyCollectionItem () { function onMouseClick (event) { if (status === 'off') { canvas.floatingSpace.makeVisible() - generateStrategyParts() + thisObject.strategy = newStrategy() + thisObject.strategy.initialize(thisObject.strategySource) status = 'on' } else { canvas.floatingSpace.makeInvisible() - destroyStrategyParts() + thisObject.strategy.finalize() status = 'off' } } - function onMenuItemClick (payload, action) { - console.log('onMenuItemClick ' + action) - - switch (action) { - case 'Open Settings': - - break - case 'Delete Strategy': - - break - case 'Add Situation': - - break - case 'Add Phase': - - break - case 'Edit Code': - - break - case 'Delete Phase': - - break - case 'Delete Situation': - for (let i = 0; i < payload.parentNode.situations.length; i++) { - let situation = payload.parentNode.situations[i] - if (situation.name === payload.node.name) { - payload.parentNode.situations.splice(i) - return - } - } - break - case 'Delete Condition': - - break - default: - - } - } - - function createPart (partType, name, node, parentNode, title) { - let payload = { - position: { - x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, - y: viewPort.height / 2 - }, - visible: true - } - - if (title !== undefined) { - payload.upLabel = title - } else { - payload.upLabel = partType - } - - payload.downLabel = name - payload.node = node - payload.parentNode = parentNode - payload.onMenuItemClick = onMenuItemClick - - node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) - } - - function destroyPart (node) { - canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) - } - - function generateStrategyParts () { - let lastPhase - let strategy = thisObject.strategy - createPart('Strategy', strategy.name, strategy, undefined) - - createPart('Strategy Entry', '', strategy.entryPoint, strategy) - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - - createPart('Strategy Exit', '', strategy.exitPoint, strategy) - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - - createPart('Trade Entry', '', strategy.sellPoint, strategy) - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - - createPart('Stop', '', strategy.stopLoss, strategy) - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - - let parent - if (p === 0) { - parent = strategy.stopLoss - } else { - parent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - } - - createPart('Take Profit', '', strategy.buyOrder, strategy) - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - let parent - if (p === 0) { - parent = strategy.buyOrder - } else { - parent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - } - } - - function destroyStrategyParts () { - let strategy = thisObject.strategy - destroyPart(strategy) - - destroyPart(strategy.entryPoint) - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - - destroyPart(strategy.exitPoint) - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - - destroyPart(strategy.sellPoint) - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - - destroyPart(strategy.stopLoss) - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - destroyPart(strategy.stopLoss) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - } - - destroyPart(strategy.buyOrder) - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - destroyPart(strategy.buyOrder) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - } - } - function getContainer (point) { let container if (thisObject.container.frame.isThisPointHere(point, true) === true) { @@ -291,14 +73,14 @@ function newStrategyCollectionItem () { } function text () { - if (thisObject.strategy === undefined) { + if (thisObject.strategySource === undefined) { return } const LEFT_MARGIN = 80 const TOP_MARGIN = 45 - let strategy = thisObject.strategy + let strategy = thisObject.strategySource let labelpoint = { x: LEFT_MARGIN, @@ -393,4 +175,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - From 28cfb393d8beefbcb9b35a25da10bd2538b5144c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 16:42:09 +0200 Subject: [PATCH 045/143] Conditions and Situations being deleted, but buggy --- FloatingSpace/FloatingLayer.js | 17 +++--------- StrategySpace/Strategy.js | 47 ++++++++++++++++++++++++++-------- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 95f18f03f..9f3cab8a1 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -130,18 +130,12 @@ function newFloatingLayer () { at each of the arrays until we find it. Once found, we remove it and is sent to the dying floating objects array. */ - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> Entering function.') } - for (let i = 0; i < invisibleFloatingObjects.length; i++) { let floatingObject = invisibleFloatingObjects[i] if (floatingObject.handle === pFloatingObjectHandle) { invisibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> floatingObject.handle = ' + floatingObject.handle) } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> Removing floatingObject from invisibleFloatingObjects.') } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - sendToDie(floatingObject) return } @@ -153,10 +147,6 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { visibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> floatingObject.handle = ' + floatingObject.handle) } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> Removing floatingObject from visibleFloatingObjects.') } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - sendToDie(floatingObject) return } @@ -223,15 +213,15 @@ function newFloatingLayer () { break } case 'Strategy Part': { - if (pFloatingObject.payload.profile.visible === false) { return } + if (pFloatingObject.payload.visible === false) { return } payload.profile = { position: { x: pFloatingObject.payload.position.x, y: pFloatingObject.payload.position.y }, - visible: pFloatingObject.payload.profile.visible, - botAvatar: pFloatingObject.payload.profile.botAvatar + visible: pFloatingObject.payload.visible, + botAvatar: pFloatingObject.payload.botAvatar } pFloatingObject.payload = payload @@ -921,3 +911,4 @@ function newFloatingLayer () { } } } + diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index be7a830b4..156c2bed3 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -58,6 +58,7 @@ function newStrategy () { payload.onMenuItemClick = onMenuItemClick node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) + node.payload = payload } function destroyPart (node) { @@ -242,20 +243,46 @@ function newStrategy () { case 'Delete Phase': break - case 'Delete Situation': - for (let i = 0; i < payload.parentNode.situations.length; i++) { - let situation = payload.parentNode.situations[i] - if (situation.name === payload.node.name) { - payload.parentNode.situations.splice(i) - return - } - } + case 'Delete Situation': { + deleteSituation(payload.node) break - case 'Delete Condition': - + } break + case 'Delete Condition': { + deleteCondition(payload.node) + break + } default: } } + + function deleteSituation (node) { + let payload = node.payload + for (let j = 0; j < payload.parentNode.situations.length; j++) { + let situation = payload.parentNode.situations[j] + if (situation.name === node.name) { + for (let i = 0; i < situation.conditions.length; i++) { + let condition = situation.conditions[i] + destroyPart(condition) + } + payload.parentNode.situations.splice(j) + destroyPart(node) + return + } + } + } + + function deleteCondition (node) { + let payload = node.payload + for (let i = 0; i < payload.parentNode.conditions.length; i++) { + let condition = payload.parentNode.conditions[i] + if (condition.name === node.name) { + payload.parentNode.conditions.splice(i) + destroyPart(node) + return + } + } + } } + From cf3097d62e85d84bda7a8caabe0c88596354ac68 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 16:58:56 +0200 Subject: [PATCH 046/143] cleanNode --- StrategySpace/Strategy.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 156c2bed3..8d675f59d 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -265,9 +265,12 @@ function newStrategy () { for (let i = 0; i < situation.conditions.length; i++) { let condition = situation.conditions[i] destroyPart(condition) + cleanNode(condition) } + situation.conditions = [] + destroyPart(situation) payload.parentNode.situations.splice(j) - destroyPart(node) + cleanNode(situation) return } } @@ -278,11 +281,25 @@ function newStrategy () { for (let i = 0; i < payload.parentNode.conditions.length; i++) { let condition = payload.parentNode.conditions[i] if (condition.name === node.name) { - payload.parentNode.conditions.splice(i) destroyPart(node) + payload.parentNode.conditions.splice(i) + cleanNode(condition) return } } } + + function cleanNode (node) { + node.payload.position.x = undefined + node.payload.position.y = undefined + node.payload.visible = undefined + node.payload.upLabel = undefined + node.payload.downLabel = undefined + node.payload.node = undefined + node.payload.parentNode = undefined + node.payload.onMenuItemClick = undefined + node.handle = undefined + node.payload = undefined + } } From 7a571383ecbdd1864bf331c9f3f177fa8384d3a1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 18:12:42 +0200 Subject: [PATCH 047/143] All finalize functions implemented --- Container.js | 3 + EventHandler.js | 9 +- FloatingSpace/CircularMenu.js | 28 ++++- FloatingSpace/CircularMenuItem.js | 29 +++-- FloatingSpace/FloatingLayer.js | 184 ++---------------------------- FloatingSpace/FloatingObject.js | 29 ++++- FloatingSpace/NoteSets.js | 14 +-- FloatingSpace/StrategyPart.js | 34 ++++-- FloatingSpace/StrategyParts.js | 1 - 9 files changed, 115 insertions(+), 216 deletions(-) diff --git a/Container.js b/Container.js index b5d2872df..b6ef7eace 100644 --- a/Container.js +++ b/Container.js @@ -45,6 +45,9 @@ function newContainer () { thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId) + + thisObject.parentContainer = undefined + thisObject.eventHandler.finalize() } } diff --git a/EventHandler.js b/EventHandler.js index ad843afeb..da29745a9 100644 --- a/EventHandler.js +++ b/EventHandler.js @@ -4,13 +4,18 @@ function newEventHandler () { name: undefined, // This is for debugging purposes only. listenToEvent: listenToEvent, stopListening: stopListening, - raiseEvent: raiseEvent + raiseEvent: raiseEvent, + finalize: finalize } - var eventHandlers = [] // Here we store all the functions we will call when an event is raiseed. + let eventHandlers = [] // Here we store all the functions we will call when an event is raiseed. return thisObject + function finalize () { + eventHandlers = [] + } + function listenToEvent (eventType, handler, extraData) { let eventSubscriptionId = Math.trunc(Math.random() * 1000000) eventHandlers.push([eventType, handler, extraData, eventSubscriptionId]) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 6c2af8b94..8e286884b 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -9,6 +9,7 @@ function newCircularMenu () { drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, + finalize: finalize, initialize: initialize } @@ -20,14 +21,29 @@ function newCircularMenu () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let menuItemsInitialValues = [] let menuItems = [] - let payload + + let selfFocusEventSubscriptionId + let selfNotFocuskEventSubscriptionId return thisObject - function initialize (menuItemsInitialValues, pPayload) { - payload = pPayload + function finalize () { + thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + + for (let i = 0; i < menuItems.length; i++) { + let menuItem = menuItems[i] + menuItem.finalize() + } + + menuItems = undefined + } + + function initialize (menuItemsInitialValues, payload) { /* Create the array of Menu Items */ for (let i = 0; i < menuItemsInitialValues.length; i++) { @@ -49,8 +65,8 @@ function newCircularMenu () { menuItems.push(menuItem) } - thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) - thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) } function getContainer (point) { diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 4be819d05..cb8a25ea4 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -16,10 +16,12 @@ function newCircularMenuItem () { currentRadius: undefined, angle: undefined, container: undefined, + payload: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, + finalize: finalize, initialize: initialize } @@ -35,12 +37,26 @@ function newCircularMenuItem () { thisObject.container.frame.height = 30 let isMouseOver = false - let payload + let selfMouseOverEventSubscriptionId + let selfMouseClickEventSubscriptionId + let selfMouseNotOverEventSubscriptionId return thisObject + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.iconOn = undefined + thisObject.iconOff = undefined + thisObject.payload = undefined + } + function initialize (pPayload) { - payload = pPayload + thisObject.payload = pPayload /* Load Menu Images */ thisObject.iconOn = new Image() @@ -58,9 +74,9 @@ function newCircularMenuItem () { thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn thisObject.icon = thisObject.iconOn // The default value is ON. - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -100,7 +116,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - payload.onMenuItemClick(payload, thisObject.action) + thisObject.payload.onMenuItemClick(thisObject.payload, thisObject.action) } function drawBackground () { @@ -157,4 +173,3 @@ function newCircularMenuItem () { } } } - diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 9f3cab8a1..c74b7f9ba 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -52,30 +52,14 @@ function newFloatingLayer () { let visibleFloatingObjects = [] - /* - The creator of the floatingObject at any time can decide to get rid of it and kill it. But we dont want the object just to dissapear because - that doesnt look good. What this module does is to remove it from the visible or invisible layer where they are and move them to the - dyingFloatingObjects array. Object in this array have a short animation until they finally graphically dissapear and at thay point they are also - removed from the dying array for good. - */ - - let dyingFloatingObjects = [] - let maxTargetRepulsionForce = 0.001 let currentHandle = 0 return thisObject function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - invisibleFloatingObjects = [] - visibleFloatingObjects = [] - dyingFloatingObjects = [] - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } + invisibleFloatingObjects = [] + visibleFloatingObjects = [] } function initialize () { @@ -95,35 +79,19 @@ function newFloatingLayer () { return container } - function addFloatingObject (pFloatingObject, callBackFunction) { + function addFloatingObject (pFloatingObject) { /* As you can see here, even though the floating objects are created outside this layer, its creator it is not supossed to keep the reference to the object, so that the managment of the objects references can live entirely inside this module. What the creator keeps, is a handle to the object which it can use to retrieve the floating object when needed. */ - try { - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> Entering function.') } - - invisibleFloatingObjects.push(pFloatingObject) - - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - - currentHandle++ - - pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); - - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> pFloatingObject.handle = ' + pFloatingObject.handle) } - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> pFloatingObject.type = ' + pFloatingObject.type) } - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } + invisibleFloatingObjects.push(pFloatingObject) + currentHandle++ + pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); } - function killFloatingObject (pFloatingObjectHandle, callBackFunction) { + function killFloatingObject (pFloatingObjectHandle) { try { /* The floting object to be killed can be either at the visible or the invisible array. What we do here is look for it @@ -136,7 +104,7 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { invisibleFloatingObjects.splice(i, 1) // Delete item from array. - sendToDie(floatingObject) + floatingObject.finalize() return } } @@ -147,7 +115,7 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { visibleFloatingObjects.splice(i, 1) // Delete item from array. - sendToDie(floatingObject) + floatingObject.finalize() return } } @@ -155,97 +123,8 @@ function newFloatingLayer () { if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object Not Found.') } if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object cannot be killed.') } if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> pFloatingObjectHandle = ' + pFloatingObjectHandle) } - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - - function sendToDie (pFloatingObject) { - try { - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Entering function.') } - - /* Lets mofigy the targerRadius */ - - pFloatingObject.targetRadius = 0 - - /* Lets transfer the payload to a new payload structure. */ - - let payload = {} - - switch (pFloatingObject.type) { - - case 'Profile Ball': { - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Profile Ball -> Entering function.') } - - if (pFloatingObject.payload.profile.visible === false) { return } - - payload.profile = { - position: { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y - }, - visible: pFloatingObject.payload.profile.visible, - botAvatar: pFloatingObject.payload.profile.botAvatar - } - - pFloatingObject.payload = payload - break - } - case 'Note': { - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Note -> Entering function.') } - - if (pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].visible === false) { return } - - payload.notes = [] - let note = { - title: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].title, - body: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].body, - date: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].date, - rate: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].rate, - position: { - x: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].position.x, - y: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].position.y - }, - visible: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].visible - } - payload.notes.push(note) - pFloatingObject.payloadNoteIndex = 0 - - pFloatingObject.payload = payload - break - } - case 'Strategy Part': { - if (pFloatingObject.payload.visible === false) { return } - - payload.profile = { - position: { - x: pFloatingObject.payload.position.x, - y: pFloatingObject.payload.position.y - }, - visible: pFloatingObject.payload.visible, - botAvatar: pFloatingObject.payload.botAvatar - } - - pFloatingObject.payload = payload - break - } - default: { - break - } - } - - dyingFloatingObjects.push(pFloatingObject) - - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Adding floatingObject to dyingFloatingObjects.') } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> dyingFloatingObjects.length = ' + dyingFloatingObjects.length) } - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } - } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -408,30 +287,10 @@ function newFloatingLayer () { return // Only one at the time. } } - - drawDyingObjects() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err= ' + err.stack) } } } - - function drawDyingObjects () { - try { - /* We also draw all the dyingFloatingObjects */ - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[dyingFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err= ' + err.stack) } - } - } } /******************************************/ @@ -551,35 +410,10 @@ function newFloatingLayer () { gravityForce(floatingObject, payload) } - - animateDyingObjects() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err= ' + err.stack) } } } - - function animateDyingObjects () { - try { - /* We animate some parts of the dying objects */ - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[i] - - if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 5) { - let speed = Math.random() - - floatingObject.container.frame.radius = floatingObject.container.frame.radius - speed * 3 - } else { - /* Here is when the floatingObjects are definetelly killed. */ - - dyingFloatingObjects.splice(i, 1) // Delete item from array. - break // only one at the time. - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err= ' + err.stack) } - } - } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index ccff86ceb..6fcc5236c 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -7,6 +7,7 @@ function newFloatingObject () { logger.fileName = MODULE_NAME let thisObject = { + container: undefined, positionLocked: false, isOnFocus: false, payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. @@ -30,7 +31,7 @@ function newFloatingObject () { updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. getContainer: getContainer, - container: undefined, + finalize: finalize, initialize: initialize } @@ -43,8 +44,26 @@ function newFloatingObject () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 + let selfMouseOverEventSubscriptionId + let selfMouseClickEventSubscriptionId + let spaceMouseOverEventSubscriptionId + let spaceFocusAquiredEventSubscriptionId + return thisObject + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + canvas.floatingSpace.container.eventHandler.stopListening(spaceMouseOverEventSubscriptionId) + canvas.floatingSpace.container.eventHandler.stopListening(spaceFocusAquiredEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.payload = undefined + thisObject.underlayingObject.finalize() + thisObject.underlayingObject = undefined + } + function initialize (pType, pSubType, floatingLayer) { switch (pType) { @@ -74,12 +93,12 @@ function newFloatingObject () { thisObject.type = pType - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) /* To consider that this object lost the focus, we monitor the space for 2 key events */ - canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) - canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) + spaceMouseOverEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) + spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) } function getContainer (point) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index 50a2f7c3b..e0a5d8093 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -124,19 +124,7 @@ function newNoteSets () { Each time we identify a floatingObject that is not at the raw data anymore, we request the floatinglayer to kill it. */ - floatingLayer.killFloatingObject(floatingNote.floatingHandle, onObjectKilled) - - function onObjectKilled (err) { - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> Floating Object Not Found.') } - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> Floating Object cannot be killed.') } - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> floatingNote.floatingHandle = ' + floatingNote.floatingHandle) } - return - } - - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Remove old Notes -> floatingNote.floatingHandle = ' + floatingNote.floatingHandle) } - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Remove old Notes -> Removed from Layer.') } - } + floatingLayer.killFloatingObject(floatingNote.floatingHandle) } else { newFloatingNotes.push(floatingNote) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index cda32802d..d0f0ccd63 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -7,10 +7,12 @@ function newStrategyPart () { menu: undefined, isOnFocus: false, container: undefined, + payload: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, + finalize: finalize, initialize: initialize } @@ -25,12 +27,31 @@ function newStrategyPart () { let floatingLayer let image let imagePath - let payload + + let selfFocusEventSubscriptionId + let selfNotFocuskEventSubscriptionId + let selfMouseClickEventSubscriptionId return thisObject + function finalize () { + thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.payload = undefined + thisObject.menu.finalize() + thisObject.menu = undefined + + floatingLayer = undefined + image = undefined + imagePath = undefined + } + function initialize (pFloatingLayer, pType, pPayload) { - payload = pPayload + thisObject.payload = pPayload floatingLayer = pFloatingLayer let menuItemsInitialValues = [] @@ -240,7 +261,7 @@ function newStrategyPart () { } thisObject.menu = newCircularMenu() - thisObject.menu.initialize(menuItemsInitialValues, payload) + thisObject.menu.initialize(menuItemsInitialValues, thisObject.payload) thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) /* Load Part Image */ @@ -255,9 +276,9 @@ function newStrategyPart () { image.src = window.canvasApp.urlPrefix + imagePath } - thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) - thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) } function getContainer (point) { @@ -427,4 +448,3 @@ function newStrategyPart () { } } } - diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 9f08b849a..1f0e31869 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -19,7 +19,6 @@ function newStrategyParts () { return thisObject function finalize () { - floatingLayer.finalize() floatingLayer = undefined } From b66ccc8182d4b64a0ebff37ec45772a3a6a9fc34 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 20:58:31 +0200 Subject: [PATCH 048/143] BUG related to SPLICE fixed --- FloatingSpace/FloatingLayer.js | 26 ++++++++++++-------------- FloatingSpace/StrategyPart.js | 5 +++++ StrategySpace/Strategy.js | 7 +++---- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index c74b7f9ba..bb4ebe3c4 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -86,9 +86,9 @@ function newFloatingLayer () { creator keeps, is a handle to the object which it can use to retrieve the floating object when needed. */ - invisibleFloatingObjects.push(pFloatingObject) currentHandle++ pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); + invisibleFloatingObjects.push(pFloatingObject) } function killFloatingObject (pFloatingObjectHandle) { @@ -105,6 +105,7 @@ function newFloatingLayer () { invisibleFloatingObjects.splice(i, 1) // Delete item from array. floatingObject.finalize() + return } } @@ -174,22 +175,19 @@ function newFloatingLayer () { drawVisibleObjects() function drawVisibleObjects () { - try { /* We draw all the visibleFloatingObjects. */ - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - - makeVisible() - } catch (err) { + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawBackground() } + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] + floatingObject.drawForeground() + } + + makeVisible() } function makeVisible () { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d0f0ccd63..61053d1f2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -326,6 +326,11 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) + if (parentFloatingObject === undefined) { + console.log(pFloatingObject) + console.log('Now') + } + pFloatingObject.payload.position.x = parentFloatingObject.container.frame.position.x pFloatingObject.payload.position.y = parentFloatingObject.container.frame.position.y diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 8d675f59d..3afbe11b3 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -222,8 +222,6 @@ function newStrategy () { } function onMenuItemClick (payload, action) { - console.log('onMenuItemClick ' + action) - switch (action) { case 'Open Settings': @@ -269,7 +267,7 @@ function newStrategy () { } situation.conditions = [] destroyPart(situation) - payload.parentNode.situations.splice(j) + payload.parentNode.situations.splice(j, 1) cleanNode(situation) return } @@ -282,7 +280,7 @@ function newStrategy () { let condition = payload.parentNode.conditions[i] if (condition.name === node.name) { destroyPart(node) - payload.parentNode.conditions.splice(i) + payload.parentNode.conditions.splice(i, 1) cleanNode(condition) return } @@ -300,6 +298,7 @@ function newStrategy () { node.payload.onMenuItemClick = undefined node.handle = undefined node.payload = undefined + node.cleaned = true } } From f5b5f4b852bedc2935a9f3907d544b6ca16a87da Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 09:58:45 +0200 Subject: [PATCH 049/143] Delete Phases Working --- FloatingSpace/StrategyPart.js | 12 +++-- FloatingSpace/StrategyParts.js | 8 +-- StrategySpace/Strategy.js | 90 +++++++++++++++++++++++----------- 3 files changed, 73 insertions(+), 37 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 61053d1f2..b1f32d2de 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -1,6 +1,10 @@ function newStrategyPart () { const MODULE_NAME = 'Strategy Part' + const ERROR_LOG = true + + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME let thisObject = { type: undefined, @@ -83,7 +87,7 @@ function newStrategyPart () { }] break } - case 'Strategy Entry': { + case 'Strategy Entry Event': { imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ { @@ -99,7 +103,7 @@ function newStrategyPart () { }] break } - case 'Strategy Exit': { + case 'Strategy Exit Event': { imagePath = 'Images/icons/style-01/support.png' menuItemsInitialValues = [ { @@ -115,7 +119,7 @@ function newStrategyPart () { }] break } - case 'Trade Entry': { + case 'Trade Entry Event': { imagePath = 'Images/icons/style-01/compass.png' menuItemsInitialValues = [ { @@ -324,7 +328,7 @@ function newStrategyPart () { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) + let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.chainParent.handle) if (parentFloatingObject === undefined) { console.log(pFloatingObject) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 1f0e31869..248012cc9 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -39,19 +39,19 @@ function newStrategyParts () { level_1() break } - case 'Strategy Entry': { + case 'Strategy Entry Event': { level_2() break } - case 'Strategy Exit': { + case 'Strategy Exit Event': { level_2() break } - case 'Trade Entry': { + case 'Trade Entry Event': { level_2() break } - case 'Trade Exit': { + case 'Trade Exit Event': { level_2() break } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 3afbe11b3..9b9b58483 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -37,7 +37,7 @@ function newStrategy () { } - function createPart (partType, name, node, parentNode, title) { + function createPart (partType, name, node, parentNode, chainParent, title) { let payload = { position: { x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, @@ -55,6 +55,7 @@ function newStrategy () { payload.downLabel = name payload.node = node payload.parentNode = parentNode + payload.chainParent = chainParent payload.onMenuItemClick = onMenuItemClick node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) @@ -68,84 +69,84 @@ function newStrategy () { function generateStrategyParts () { let lastPhase let strategy = thisObject.strategySource - createPart('Strategy', strategy.name, strategy, undefined) + createPart('Strategy', strategy.name, strategy, undefined, undefined) - createPart('Strategy Entry', '', strategy.entryPoint, strategy) + createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } - createPart('Strategy Exit', '', strategy.exitPoint, strategy) + createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } - createPart('Trade Entry', '', strategy.sellPoint, strategy) + createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } - createPart('Stop', '', strategy.stopLoss, strategy) + createPart('Stop', '', strategy.stopLoss, strategy, strategy) for (let p = 0; p < strategy.stopLoss.phases.length; p++) { let phase = strategy.stopLoss.phases[p] - let parent + let chainParent if (p === 0) { - parent = strategy.stopLoss + chainParent = strategy.stopLoss } else { - parent = lastPhase + chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } } - createPart('Take Profit', '', strategy.buyOrder, strategy) + createPart('Take Profit', '', strategy.buyOrder, strategy, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - let parent + let chainParent if (p === 0) { - parent = strategy.buyOrder + chainParent = strategy.buyOrder } else { - parent = lastPhase + chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } } @@ -238,14 +239,14 @@ function newStrategy () { case 'Edit Code': break - case 'Delete Phase': - + case 'Delete Phase': { + deletePhase(payload.node) break + } case 'Delete Situation': { deleteSituation(payload.node) break } - break case 'Delete Condition': { deleteCondition(payload.node) break @@ -255,6 +256,37 @@ function newStrategy () { } } + function deletePhase (node) { + let payload = node.payload + for (let k = 0; k < payload.parentNode.phases.length; k++) { + let phase = payload.parentNode.phases[k] + if (phase.name === node.name) { + for (let j = 0; j < phase.situations.length; j++) { + let situation = phase.situations[j] + for (let i = 0; i < situation.conditions.length; i++) { + let condition = situation.conditions[i] + destroyPart(condition) + cleanNode(condition) + } + situation.conditions = [] + destroyPart(situation) + phase.situations.splice(j, 1) + cleanNode(situation) + } + phase.situations = [] + /* Before deleting this phase we need to give its chainParent to the next phase down the chain */ + if (k < payload.parentNode.phases.length - 1) { + payload.parentNode.phases[k + 1].payload.chainParent = payload.chainParent + } + /* Continue destroying this phase */ + destroyPart(phase) + payload.parentNode.phases.splice(k, 1) + cleanNode(phase) + return + } + } + } + function deleteSituation (node) { let payload = node.payload for (let j = 0; j < payload.parentNode.situations.length; j++) { @@ -295,10 +327,10 @@ function newStrategy () { node.payload.downLabel = undefined node.payload.node = undefined node.payload.parentNode = undefined + node.payload.chainParent = undefined node.payload.onMenuItemClick = undefined node.handle = undefined node.payload = undefined node.cleaned = true } } - From 43ba575d1fbfd7cbe810af7752e02497ffbf943d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 10:33:01 +0200 Subject: [PATCH 050/143] Cleaning References not needed --- FloatingSpace/StrategyPart.js | 119 +++++++++++++++++++--------------- 1 file changed, 65 insertions(+), 54 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b1f32d2de..a693f2745 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -328,29 +328,31 @@ function newStrategyPart () { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.chainParent.handle) + let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) - if (parentFloatingObject === undefined) { - console.log(pFloatingObject) - console.log('Now') - } - - pFloatingObject.payload.position.x = parentFloatingObject.container.frame.position.x - pFloatingObject.payload.position.y = parentFloatingObject.container.frame.position.y + thisObject.payload.position.x = parentFloatingObject.container.frame.position.x + thisObject.payload.position.y = parentFloatingObject.container.frame.position.y /* Here I continue painting the background */ - let point = { - x: pFloatingObject.payload.position.x, - y: pFloatingObject.payload.position.y + let targetPoint = { + x: thisObject.payload.position.x, + y: thisObject.payload.position.y } - if (pFloatingObject.container.frame.radius > 1) { + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + if (thisObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) - browserCanvasContext.lineTo(point.x, point.y) + browserCanvasContext.moveTo(position.x, position.y) + browserCanvasContext.lineTo(targetPoint.x, targetPoint.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([1, 4]) browserCanvasContext.lineWidth = 1 @@ -364,11 +366,59 @@ function newStrategyPart () { let radius = 1 browserCanvasContext.beginPath() - browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) + browserCanvasContext.arc(targetPoint.x, targetPoint.y, radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' browserCanvasContext.fill() } + + drawText() + + function drawText () { + /* Text Follows */ + let position = { + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y + } + let radius = pFloatingObject.container.frame.radius + /* Label Text */ + let labelPoint + let fontSize = pFloatingObject.currentFontSize + let label + + if (radius > 6 && thisObject.isOnFocus === true) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + label = pFloatingObject.payload.downLabel + + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + if (radius > 6) { + label = pFloatingObject.payload.upLabel + + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } } function drawForeground (pFloatingObject) { @@ -415,45 +465,6 @@ function newStrategyPart () { if (image.canDrawIcon === true) { browserCanvasContext.drawImage(image, position.x - pFloatingObject.currentImageSize / 2, position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) } - } - - /* Label Text */ - - if (radius > 6 && thisObject.isOnFocus === true) { - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - - let labelPoint - let fontSize = pFloatingObject.currentFontSize - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - let label - - label = pFloatingObject.payload.upLabel - - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - - label = pFloatingObject.payload.downLabel - - if (label !== undefined && thisObject.isOnFocus === true) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius * 1 / 2 + fontSize * FONT_ASPECT_RATIO + 15 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } } } } From b03026d24abb23bf24cb2a9b1c7a2455a573d6b3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 10:56:13 +0200 Subject: [PATCH 051/143] middeground and draw focus implemented --- FloatingSpace/FloatingLayer.js | 10 +++ FloatingSpace/FloatingObject.js | 10 +++ FloatingSpace/Note.js | 10 +++ FloatingSpace/ProfileBall.js | 10 +++ FloatingSpace/StrategyPart.js | 116 ++++++++++++++++++-------------- 5 files changed, 104 insertions(+), 52 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index bb4ebe3c4..31f49330a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -182,11 +182,21 @@ function newFloatingLayer () { floatingObject.drawBackground() } + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawMiddleground() + } + for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] floatingObject.drawForeground() } + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawOnFocus() + } + makeVisible() } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6fcc5236c..2ef8ca566 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -27,7 +27,9 @@ function newFloatingObject () { radomizeCurrentPosition: radomizeCurrentPosition, radomizeCurrentSpeed: radomizeCurrentSpeed, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. getContainer: getContainer, @@ -202,10 +204,18 @@ function newFloatingObject () { thisObject.underlayingObject.drawBackground(thisObject) } + function drawMiddleground () { + thisObject.underlayingObject.drawMiddleground(thisObject) + } + function drawForeground () { thisObject.underlayingObject.drawForeground(thisObject) } + function drawOnFocus () { + thisObject.underlayingObject.drawOnFocus(thisObject) + } + function initializeMass (suggestedValue) { let mass = suggestedValue if (mass < 0.1) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 0fda6958f..6bb4e5858 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -6,7 +6,9 @@ function newNote () { container: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, initialize: initialize } @@ -88,6 +90,14 @@ function newNote () { } } + function drawOnFocus () { + + } + + function drawMiddleground () { + + } + function drawForeground (pFloatingObject) { const BUBBLE_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 14 diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 2e8c5c526..544370e61 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -6,7 +6,9 @@ function newProfileBall () { container: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, initialize: initialize } @@ -215,6 +217,14 @@ function newProfileBall () { } } + function drawOnFocus () { + + } + + function drawMiddleground () { + + } + function drawForeground (pFloatingObject) { if (pFloatingObject.container.frame.radius > 5) { /* Contourn */ diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index a693f2745..f4482fcb4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -14,7 +14,9 @@ function newStrategyPart () { payload: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, finalize: finalize, initialize: initialize @@ -316,15 +318,37 @@ function newStrategyPart () { function drawBackground (pFloatingObject) { if (thisObject.isOnFocus === false) { - drawPartBackground(pFloatingObject) + drawConnectingLine(pFloatingObject) thisObject.menu.drawBackground() + } + } - drawPartForeground(pFloatingObject) + function drawMiddleground (pFloatingObject) { + if (thisObject.isOnFocus === false) { + drawText(pFloatingObject) + } + } + + function drawForeground (pFloatingObject) { + if (thisObject.isOnFocus === false) { + drawBodyAndPicture(pFloatingObject) thisObject.menu.drawForeground() } } - function drawPartBackground (pFloatingObject) { + function drawOnFocus (pFloatingObject) { + if (thisObject.isOnFocus === true) { + drawConnectingLine(pFloatingObject) + thisObject.menu.drawBackground() + + drawText(pFloatingObject) + + drawBodyAndPicture(pFloatingObject) + thisObject.menu.drawForeground() + } + } + + function drawConnectingLine (pFloatingObject) { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ @@ -371,67 +395,55 @@ function newStrategyPart () { browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' browserCanvasContext.fill() } + } - drawText() + function drawText (pFloatingObject) { +/* Text Follows */ + let position = { + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y + } + let radius = pFloatingObject.container.frame.radius + /* Label Text */ + let labelPoint + let fontSize = pFloatingObject.currentFontSize + let label - function drawText () { - /* Text Follows */ - let position = { - x: pFloatingObject.container.frame.position.x, - y: pFloatingObject.container.frame.position.y - } - let radius = pFloatingObject.container.frame.radius - /* Label Text */ - let labelPoint - let fontSize = pFloatingObject.currentFontSize - let label + if (radius > 6 && thisObject.isOnFocus === true) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - if (radius > 6 && thisObject.isOnFocus === true) { - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + label = pFloatingObject.payload.downLabel + + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - label = pFloatingObject.payload.downLabel - - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - if (radius > 6) { - label = pFloatingObject.payload.upLabel + } + if (radius > 6) { + label = pFloatingObject.payload.upLabel - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } } - function drawForeground (pFloatingObject) { - if (thisObject.isOnFocus === true) { - drawPartBackground(pFloatingObject) - thisObject.menu.drawBackground() - - drawPartForeground(pFloatingObject) - thisObject.menu.drawForeground() - } - } - - function drawPartForeground (pFloatingObject) { + function drawBodyAndPicture (pFloatingObject) { let position = { x: pFloatingObject.container.frame.position.x, y: pFloatingObject.container.frame.position.y From d098f726295d24f278fb8bc1390eb1e7bfd4132a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 11:15:12 +0200 Subject: [PATCH 052/143] tyding code --- FloatingSpace/StrategyPart.js | 77 ++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 37 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index f4482fcb4..ef3a8b5f6 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -302,6 +302,14 @@ function newStrategyPart () { function physics () { thisObject.menu.physics() + + if (thisObject.payload.chainParent === undefined) { return } + + /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ + let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) + + thisObject.payload.position.x = parentFloatingObject.container.frame.position.x + thisObject.payload.position.y = parentFloatingObject.container.frame.position.y } function onFocus () { @@ -316,48 +324,40 @@ function newStrategyPart () { } - function drawBackground (pFloatingObject) { + function drawBackground (params) { if (thisObject.isOnFocus === false) { - drawConnectingLine(pFloatingObject) + drawConnectingLine() thisObject.menu.drawBackground() } } - function drawMiddleground (pFloatingObject) { + function drawMiddleground (params) { if (thisObject.isOnFocus === false) { - drawText(pFloatingObject) + drawText(params) } } - function drawForeground (pFloatingObject) { + function drawForeground (params) { if (thisObject.isOnFocus === false) { - drawBodyAndPicture(pFloatingObject) + drawBodyAndPicture(params) thisObject.menu.drawForeground() } } - function drawOnFocus (pFloatingObject) { + function drawOnFocus (params) { if (thisObject.isOnFocus === true) { - drawConnectingLine(pFloatingObject) + drawConnectingLine() thisObject.menu.drawBackground() - drawText(pFloatingObject) + drawText(params) - drawBodyAndPicture(pFloatingObject) + drawBodyAndPicture(params) thisObject.menu.drawForeground() } } - function drawConnectingLine (pFloatingObject) { - if (pFloatingObject.payload.parentNode === undefined) { return } - - /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) - - thisObject.payload.position.x = parentFloatingObject.container.frame.position.x - thisObject.payload.position.y = parentFloatingObject.container.frame.position.y - - /* Here I continue painting the background */ + function drawConnectingLine () { + if (thisObject.payload.chainParent === undefined) { return } let targetPoint = { x: thisObject.payload.position.x, @@ -384,7 +384,7 @@ function newStrategyPart () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.container.frame.radius > 0.5) { + if (thisObject.container.frame.radius > 0.5) { /* Target Spot */ let radius = 1 @@ -397,24 +397,27 @@ function newStrategyPart () { } } - function drawText (pFloatingObject) { + function drawText (params) { /* Text Follows */ let position = { - x: pFloatingObject.container.frame.position.x, - y: pFloatingObject.container.frame.position.y + x: 0, + y: 0 } - let radius = pFloatingObject.container.frame.radius + + position = thisObject.container.frame.frameThisPoint(position) + + let radius = thisObject.container.frame.radius /* Label Text */ let labelPoint - let fontSize = pFloatingObject.currentFontSize + let fontSize = params.currentFontSize let label if (radius > 6 && thisObject.isOnFocus === true) { - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.strokeStyle = params.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - label = pFloatingObject.payload.downLabel + label = params.payload.downLabel if (label !== undefined) { labelPoint = { @@ -423,12 +426,12 @@ function newStrategyPart () { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillStyle = params.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } if (radius > 6) { - label = pFloatingObject.payload.upLabel + label = params.payload.upLabel if (label !== undefined) { labelPoint = { @@ -437,19 +440,19 @@ function newStrategyPart () { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillStyle = params.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } } - function drawBodyAndPicture (pFloatingObject) { + function drawBodyAndPicture (params) { let position = { - x: pFloatingObject.container.frame.position.x, - y: pFloatingObject.container.frame.position.y + x: params.container.frame.position.x, + y: params.container.frame.position.y } - let radius = pFloatingObject.container.frame.radius + let radius = params.container.frame.radius if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ @@ -458,7 +461,7 @@ function newStrategyPart () { browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() - browserCanvasContext.fillStyle = pFloatingObject.fillStyle + browserCanvasContext.fillStyle = params.fillStyle browserCanvasContext.fill() @@ -475,7 +478,7 @@ function newStrategyPart () { if (image !== undefined) { if (image.canDrawIcon === true) { - browserCanvasContext.drawImage(image, position.x - pFloatingObject.currentImageSize / 2, position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) + browserCanvasContext.drawImage(image, position.x - params.currentImageSize / 2, position.y - params.currentImageSize / 2, params.currentImageSize, params.currentImageSize) } } } From d2953a5b5a5f53e9b8b2b3fc0cab666024bb8bc8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 12:29:39 +0200 Subject: [PATCH 053/143] Adding Conditions done --- StrategySpace/Strategy.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 9b9b58483..86e01bad4 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -239,6 +239,19 @@ function newStrategy () { case 'Edit Code': break + + case 'Add Condition': + { + let situation = payload.node + let m = situation.conditions.length + let condition = { + name: 'New Condition' + ' #' + (m + 1), + code: '' + } + situation.conditions.push(condition) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + } + break case 'Delete Phase': { deletePhase(payload.node) break From 88d029a72b5c8d5c9e3c6a40d6b8a04bfe5ff995 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 12:51:15 +0200 Subject: [PATCH 054/143] Improvements at the place where it is generated --- FloatingSpace/StrategyParts.js | 4 ++-- StrategySpace/Strategy.js | 14 ++++++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 248012cc9..f53cf01eb 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -26,9 +26,9 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (type, pPayload) { + function createNewStrategyPart (type, payload) { let floatingObject = newFloatingObject() - floatingObject.payload = pPayload + floatingObject.payload = payload floatingObject.initialize('Strategy Part', type, floatingLayer) floatingObject.underlayingObject.type = type // after initialize diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 86e01bad4..3983613a9 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -38,12 +38,17 @@ function newStrategy () { } function createPart (partType, name, node, parentNode, chainParent, title) { - let payload = { - position: { + let payload = {} + if (chainParent === undefined) { + payload.position = { x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, y: viewPort.height / 2 - }, - visible: true + } + } else { + payload.position = { + x: chainParent.payload.position.x, + y: chainParent.payload.position.y + } } if (title !== undefined) { @@ -52,6 +57,7 @@ function newStrategy () { payload.upLabel = partType } + payload.visible = true payload.downLabel = name payload.node = node payload.parentNode = parentNode From 16b5b2ad2f94d5ba6f22561fb03f74f467d6fef8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 15:12:39 +0200 Subject: [PATCH 055/143] Better positioning when adding a new element --- FloatingSpace/FloatingLayer.js | 40 ++++++++++++++------------------- FloatingSpace/FloatingObject.js | 20 +++++++++++++++++ FloatingSpace/ProfileBall.js | 4 ++-- FloatingSpace/StrategyPart.js | 11 ++++----- StrategySpace/Strategy.js | 8 +++---- 5 files changed, 47 insertions(+), 36 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 31f49330a..d1dc9a1d1 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -215,19 +215,19 @@ function newFloatingLayer () { switch (floatingObject.type) { case 'Profile Ball': { - payload.position = floatingObject.payload.profile.position + payload.targetPosition = floatingObject.payload.profile.position payload.visible = floatingObject.payload.profile.visible break } case 'Note': { if (floatingObject.payload.notes[floatingObject.payloadNoteIndex] !== undefined) { - payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position + payload.targetPosition = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible } break } case 'Strategy Part': { - payload.position = floatingObject.payload.position + payload.targetPosition = floatingObject.payload.targetPosition payload.visible = floatingObject.payload.visible break } @@ -237,11 +237,6 @@ function newFloatingLayer () { } if (payload.visible === true) { - /* The first time that the floatingObject becomes visible, we need to do this. */ - - floatingObject.radomizeCurrentPosition(payload.position) - floatingObject.radomizeCurrentSpeed() - visibleFloatingObjects.push(floatingObject) invisibleFloatingObjects.splice(i, 1) // Delete item from array. @@ -348,18 +343,18 @@ function newFloatingLayer () { switch (floatingObject.type) { case 'Profile Ball': { - payload.position = floatingObject.payload.profile.position + payload.targetPosition = floatingObject.payload.profile.position payload.visible = floatingObject.payload.profile.visible break } case 'Note': { - payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position + payload.targetPosition = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible break } case 'Strategy Part': { - payload.position = floatingObject.payload.position + payload.targetPosition = floatingObject.payload.targetPosition payload.visible = floatingObject.payload.visible break } @@ -368,13 +363,13 @@ function newFloatingLayer () { } } - if (floatingObject.container.frame.position.x < payload.position.x) { + if (floatingObject.container.frame.position.x < payload.targetPosition.x) { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + 0.005 } else { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x - 0.005 } - if (floatingObject.container.frame.position.y < payload.position.y) { + if (floatingObject.container.frame.position.y < payload.targetPosition.y) { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + 0.005 } else { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 @@ -434,7 +429,7 @@ function newFloatingLayer () { const coulomb = 0.00001 const minForce = 0.01 - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject.container.frame.position.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.targetPosition.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.targetPosition.y - floatingObject.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * d * d / floatingObject.currentMass // In this case the mass of the floatingObject affects the gravity force that it receives, that gives priority to target position to bigger floatingObjects. @@ -448,8 +443,8 @@ function newFloatingLayer () { } var pos2 = { - x: payload.position.x, - y: payload.position.y + x: payload.targetPosition.x, + y: payload.targetPosition.y } var posDiff = { // Next we need the vector resulting from the 2 positions. @@ -560,15 +555,15 @@ function newFloatingLayer () { switch (floatingObject2.type) { case 'Profile Ball': { - payload.position = floatingObject2.payload.profile.position + payload.targetPosition = floatingObject2.payload.profile.position break } case 'Note': { - payload.position = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position + payload.targetPosition = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position break } case 'Strategy Part': { - payload.position = floatingObject2.payload.position + payload.targetPosition = floatingObject2.payload.targetPosition break } default: { @@ -576,7 +571,7 @@ function newFloatingLayer () { } } - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.targetPosition.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.targetPosition.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * floatingObject2.currentMass / (d * d) // ... and with it the repulsion force. @@ -592,8 +587,8 @@ function newFloatingLayer () { } var pos2 = { - x: payload.position.x, - y: payload.position.y + x: payload.targetPosition.x, + y: payload.targetPosition.y } var posDiff = { // Next we need the vector resulting from the 2 positions. @@ -753,4 +748,3 @@ function newFloatingLayer () { } } } - diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 2ef8ca566..560f1d3d5 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -101,6 +101,11 @@ function newFloatingObject () { /* To consider that this object lost the focus, we monitor the space for 2 key events */ spaceMouseOverEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) + + /* Assign a position and speed */ + + thisObject.radomizeCurrentPosition(thisObject.payload.targetPosition) + thisObject.radomizeCurrentSpeed() } function getContainer (point) { @@ -152,6 +157,17 @@ function newFloatingObject () { thisObject.currentFontSize = thisObject.currentFontSize - 0.2 } } + + /* Floating object position in screen coordinates */ + + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + thisObject.payload.position = position } function onMouseOver (point) { @@ -268,6 +284,10 @@ function newFloatingObject () { } thisObject.container.frame.position = position + thisObject.payload.position = { + x: position.x, + y: position.y + } } function radomizeCurrentSpeed () { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 544370e61..8328b7b25 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -185,8 +185,8 @@ function newProfileBall () { function drawBackground (pFloatingObject) { let point = { - x: pFloatingObject.payload.position.x, - y: pFloatingObject.payload.position.y + x: pFloatingObject.payload.targetPosition.x, + y: pFloatingObject.payload.targetPosition.y } point = viewPort.fitIntoVisibleArea(point) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index ef3a8b5f6..66639bde1 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -305,11 +305,8 @@ function newStrategyPart () { if (thisObject.payload.chainParent === undefined) { return } - /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) - - thisObject.payload.position.x = parentFloatingObject.container.frame.position.x - thisObject.payload.position.y = parentFloatingObject.container.frame.position.y + thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x + thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y } function onFocus () { @@ -360,8 +357,8 @@ function newStrategyPart () { if (thisObject.payload.chainParent === undefined) { return } let targetPoint = { - x: thisObject.payload.position.x, - y: thisObject.payload.position.y + x: thisObject.payload.targetPosition.x, + y: thisObject.payload.targetPosition.y } let position = { diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 3983613a9..af75c2eba 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -40,12 +40,12 @@ function newStrategy () { function createPart (partType, name, node, parentNode, chainParent, title) { let payload = {} if (chainParent === undefined) { - payload.position = { + payload.targetPosition = { x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, y: viewPort.height / 2 } } else { - payload.position = { + payload.targetPosition = { x: chainParent.payload.position.x, y: chainParent.payload.position.y } @@ -339,8 +339,8 @@ function newStrategy () { } function cleanNode (node) { - node.payload.position.x = undefined - node.payload.position.y = undefined + node.payload.targetPosition.x = undefined + node.payload.targetPosition.y = undefined node.payload.visible = undefined node.payload.upLabel = undefined node.payload.downLabel = undefined From c4cec14fc10a4a6fa60ddb162183d21b98104213 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 15:24:14 +0200 Subject: [PATCH 056/143] Can add situations --- StrategySpace/Strategy.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index af75c2eba..89c2e4346 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -236,16 +236,25 @@ function newStrategy () { case 'Delete Strategy': break - case 'Add Situation': - break case 'Add Phase': break case 'Edit Code': break - + case 'Add Situation': + { + let phase = payload.node + let m = phase.situations.length + let situation = { + name: 'New Situation' + ' #' + (m + 1), + conditions: [] + } + phase.situations.push(situation) + createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (m + 1)) + } + break case 'Add Condition': { let situation = payload.node @@ -353,3 +362,4 @@ function newStrategy () { node.cleaned = true } } + From 746dac5b06e2cf2efc4595a6122e6ba6ef28d42b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 15:43:07 +0200 Subject: [PATCH 057/143] Adding Phases --- StrategySpace/Strategy.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 89c2e4346..ce1b8d40c 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -237,11 +237,27 @@ function newStrategy () { break - case 'Add Phase': - - break case 'Edit Code': + break + case 'Add Phase': + { + let phaseParent = payload.node + let m = phaseParent.phases.length + let phase = { + name: 'New Phase' + ' #' + (m + 1), + code: '', + situations: [] + } + phaseParent.phases.push(phase) + let phaseChainParent + if (m > 0) { + phaseChainParent = phaseParent.phases[m - 1] + } else { + phaseChainParent = phaseParent + } + createPart('Phase', phase.name, phase, phaseParent, phaseChainParent, 'Phase' + ' #' + (m + 1)) + } break case 'Add Situation': { From 5af73fd9b8168b91a2869e5a3114b0ad09e19669 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 12:24:10 +0200 Subject: [PATCH 058/143] code editor version 1 implemented --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 4 +- FloatingSpace/CodeEditor.js | 215 ++++++++++++++++++++++++++++++ FloatingSpace/StrategyPart.js | 37 +++++ 4 files changed, 256 insertions(+), 1 deletion(-) create mode 100644 FloatingSpace/CodeEditor.js diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 8e286884b..b623c7c34 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -51,6 +51,7 @@ function newCircularMenu () { let menuItemInitialValue = menuItemsInitialValues[i] menuItem.action = menuItemInitialValue.action + menuItem.actionFunction = menuItemInitialValue.actionFunction menuItem.label = menuItemInitialValue.label menuItem.visible = menuItemInitialValue.visible menuItem.imagePathOn = menuItemInitialValue.imagePathOn diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index cb8a25ea4..b22524258 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -7,6 +7,7 @@ function newCircularMenuItem () { iconOn: undefined, iconOff: undefined, action: undefined, + actionFunction: undefined, label: undefined, visible: false, imagePathOn: undefined, @@ -53,6 +54,7 @@ function newCircularMenuItem () { thisObject.iconOn = undefined thisObject.iconOff = undefined thisObject.payload = undefined + thisObject.actionFunction = undefined } function initialize (pPayload) { @@ -116,7 +118,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - thisObject.payload.onMenuItemClick(thisObject.payload, thisObject.action) + thisObject.actionFunction(thisObject.payload, thisObject.action) } function drawBackground () { diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js new file mode 100644 index 000000000..a9cf2ed8d --- /dev/null +++ b/FloatingSpace/CodeEditor.js @@ -0,0 +1,215 @@ + +function newCodeEditor () { + const MODULE_NAME = 'Circular Menu Iem' + + let thisObject = { + isDeployed: undefined, + iconOK: undefined, + iconNOT_OK: undefined, + visible: false, + imagePathOK: undefined, + imagePathNOT_OK: undefined, + rawRadius: undefined, + targetRadius: undefined, + currentRadius: undefined, + container: undefined, + payload: undefined, + deactivate: deactivate, + activate: activate, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + finalize: finalize, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.detectMouseOver = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = 150 + thisObject.container.frame.height = 30 + + let isMouseOver = false + + let selfMouseOverEventSubscriptionId + let selfMouseClickEventSubscriptionId + let selfMouseNotOverEventSubscriptionId + return thisObject + + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.iconOK = undefined + thisObject.iconNOT_OK = undefined + thisObject.payload = undefined + } + + function initialize () { + /* Load Images */ + + thisObject.iconOK = new Image() + thisObject.iconOK.onload = onImageLoad + + function onImageLoad () { + thisObject.iconNOT_OK = new Image() + thisObject.iconNOT_OK.onload = onImageLoad + + function onImageLoad () { + thisObject.canDrawIcon = true + } + thisObject.iconNOT_OK.src = window.canvasApp.urlPrefix + thisObject.imagePathNOT_OK + } + thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK + thisObject.icon = thisObject.iconOK // The default value is ON. + + selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + function deactivate () { + if (thisObject.visible === true) { + thisObject.visible = false + let textArea = document.getElementById('textArea') + textArea.style.display = 'none' + thisObject.payload.node.code = textArea.value + } + } + + function activate (payload) { + thisObject.visible = true + thisObject.payload = payload + thisObject.rawRadius = 8 + thisObject.targetRadius = thisObject.container.frame.radius + thisObject.currentRadius = 0 + + const WIDTH = thisObject.container.frame.radius * 2.2 + const HEIGHT = thisObject.container.frame.radius * 1 + + let textArea = document.getElementById('textArea') + textArea.value = payload.node.code + textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + textArea.style.display = 'block' + + let textAreaPosition = { + x: 0 - WIDTH / 2, + y: 0 + } + + textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) + + let textAreaDiv = document.getElementById('textAreaDiv') + textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' + } + + function getContainer (point) { + let container + if (thisObject.isDeployed === true) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { + return thisObject.container + } else { + return undefined + } + } + } + + function physics () { + if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) { + if (thisObject.currentRadius < thisObject.targetRadius) { + thisObject.currentRadius = thisObject.currentRadius + 0.5 + } else { + thisObject.currentRadius = thisObject.currentRadius - 0.5 + } + } + + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + } + + function onMouseOver (point) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { + isMouseOver = true + } else { + isMouseOver = false + } + } + + function onMouseNotOver (point) { + isMouseOver = false + } + + function onMouseClick (event) { + + } + + function drawBackground () { + if (thisObject.visible === true) { + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + let radius = thisObject.container.frame.radius + + if (radius > 0.5) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(position.x, position.y, radius * 1.5 + 3, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')' + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(position.x, position.y, radius * 1.5, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')' + browserCanvasContext.fill() + } + } + } + function drawForeground () { + let iconPosition = { + x: 0, + y: thisObject.currentRadius * 1.5 + } + + iconPosition = thisObject.container.frame.frameThisPoint(iconPosition) + + /* Menu Item */ + + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { + browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) + + /* Menu Label */ + + let label = 'Code looks good!' + let labelPoint + let fontSize = 10 + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) { + labelPoint = { + x: iconPosition.x + thisObject.currentRadius + 10, + y: iconPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } +} + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 66639bde1..2dc24d638 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -12,6 +12,7 @@ function newStrategyPart () { isOnFocus: false, container: undefined, payload: undefined, + codeEditor: undefined, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -51,6 +52,11 @@ function newStrategyPart () { thisObject.menu.finalize() thisObject.menu = undefined + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.finalize() + thisObject.codeEditor = undefined + } + floatingLayer = undefined image = undefined imagePath = undefined @@ -67,6 +73,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Open Settings', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', @@ -78,6 +85,7 @@ function newStrategyPart () { }, { action: 'Delete Strategy', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -94,6 +102,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -110,6 +119,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -126,6 +136,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -142,6 +153,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Phase', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -158,6 +170,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Phase', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -174,6 +187,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Edit Code', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -185,6 +199,7 @@ function newStrategyPart () { }, { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -196,6 +211,7 @@ function newStrategyPart () { }, { action: 'Delete Phase', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -212,6 +228,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Condition', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Condition', visible: false, imagePathOn: 'Images/icons/style-01/testing.png', @@ -223,6 +240,7 @@ function newStrategyPart () { }, { action: 'Delete Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -236,9 +254,13 @@ function newStrategyPart () { } case 'Condition': { imagePath = 'Images/icons/style-01/testing.png' + thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.initialize() + thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ { action: 'Edit Code', + actionFunction: thisObject.codeEditor.activate, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -250,6 +272,7 @@ function newStrategyPart () { }, { action: 'Delete Condition', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -303,6 +326,10 @@ function newStrategyPart () { function physics () { thisObject.menu.physics() + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.physics() + } + if (thisObject.payload.chainParent === undefined) { return } thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x @@ -315,6 +342,10 @@ function newStrategyPart () { function onNotFocus () { thisObject.isOnFocus = false + + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.deactivate() + } } function onMouseClick (event) { @@ -350,6 +381,11 @@ function newStrategyPart () { drawBodyAndPicture(params) thisObject.menu.drawForeground() + + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.drawBackground() + thisObject.codeEditor.drawForeground() + } } } @@ -480,3 +516,4 @@ function newStrategyPart () { } } } + From 70cd66f7be350ffa982d79a526180e34c52de485 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 12:34:28 +0200 Subject: [PATCH 059/143] Cannot go out of vewport --- FloatingSpace/CodeEditor.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index a9cf2ed8d..933297c70 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -87,26 +87,28 @@ function newCodeEditor () { } function activate (payload) { - thisObject.visible = true - thisObject.payload = payload - thisObject.rawRadius = 8 - thisObject.targetRadius = thisObject.container.frame.radius - thisObject.currentRadius = 0 - const WIDTH = thisObject.container.frame.radius * 2.2 const HEIGHT = thisObject.container.frame.radius * 1 - let textArea = document.getElementById('textArea') - textArea.value = payload.node.code - textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' - textArea.style.display = 'block' - let textAreaPosition = { x: 0 - WIDTH / 2, y: 0 } textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) + if (textAreaPosition.y < window.canvasApp.topMargin) { return } + + thisObject.visible = true + thisObject.payload = payload + thisObject.rawRadius = 8 + thisObject.targetRadius = thisObject.container.frame.radius + thisObject.currentRadius = 0 + + let textArea = document.getElementById('textArea') + textArea.value = payload.node.code + textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + textArea.style.display = 'block' + textArea.focus() let textAreaDiv = document.getElementById('textAreaDiv') textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' From 9ded6a86d8cb972e52b7ae2a3550b18b38ac3efe Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 12:59:32 +0200 Subject: [PATCH 060/143] showing titles inside code editor. --- FloatingSpace/CodeEditor.js | 4 ++-- FloatingSpace/StrategyPart.js | 31 +++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 933297c70..d606461f9 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -167,13 +167,13 @@ function newCodeEditor () { if (radius > 0.5) { browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 1.5 + 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')' browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 1.5, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')' browserCanvasContext.fill() diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 2dc24d638..f81e6e3ab 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -377,15 +377,22 @@ function newStrategyPart () { drawConnectingLine() thisObject.menu.drawBackground() - drawText(params) - - drawBodyAndPicture(params) - thisObject.menu.drawForeground() - if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.drawBackground() thisObject.codeEditor.drawForeground() } + + drawText(params) + + if (thisObject.codeEditor !== undefined) { + if (thisObject.codeEditor.visible === false) { + drawBodyAndPicture(params) + thisObject.menu.drawForeground() + } + } else { + drawBodyAndPicture(params) + thisObject.menu.drawForeground() + } } } @@ -446,6 +453,8 @@ function newStrategyPart () { let label if (radius > 6 && thisObject.isOnFocus === true) { + const MAX_LABEL_LENGTH = 25 + browserCanvasContext.strokeStyle = params.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -453,8 +462,12 @@ function newStrategyPart () { label = params.payload.downLabel if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 } @@ -464,9 +477,15 @@ function newStrategyPart () { } } if (radius > 6) { + const MAX_LABEL_LENGTH = 30 + label = params.payload.upLabel if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 From 6b680431862ac449311da130c0504f7a824fb368 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 17:09:31 +0200 Subject: [PATCH 061/143] Edit code of a Phase DONE --- FloatingSpace/StrategyPart.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index f81e6e3ab..733b41f43 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -183,11 +183,16 @@ function newStrategyPart () { break } case 'Phase': { + imagePath = 'Images/icons/style-01/testing.png' + thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.initialize() + thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) + imagePath = 'Images/icons/style-01/placeholder.png' menuItemsInitialValues = [ { action: 'Edit Code', - actionFunction: thisObject.payload.onMenuItemClick, + actionFunction: thisObject.codeEditor.activate, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -535,4 +540,3 @@ function newStrategyPart () { } } } - From 99acdafdaf4bca11137c41852928228765808f94 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 17:51:11 +0200 Subject: [PATCH 062/143] Dinamic numbering of parts of different types --- FloatingSpace/StrategyPart.js | 43 +++++++++++++++++++++++++++++++++++ StrategySpace/Strategy.js | 30 ++++++++++++------------ 2 files changed, 58 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 733b41f43..6ffd5dda7 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -485,6 +485,7 @@ function newStrategyPart () { const MAX_LABEL_LENGTH = 30 label = params.payload.upLabel + label = addIndexNumber(label) if (label !== undefined) { if (label.length > MAX_LABEL_LENGTH) { @@ -503,6 +504,47 @@ function newStrategyPart () { } } + function addIndexNumber (label) { + switch (thisObject.type) { + case 'Phase': { + let parent = thisObject.payload.parentNode + for (let i = 0; i < parent.phases.length; i++) { + let phase = parent.phases[i] + if (phase.name === thisObject.payload.node.name) { + label = label + ' #' + (i + 1) + return label + } + } + break + } + case 'Situation': { + let parent = thisObject.payload.parentNode + for (let i = 0; i < parent.situations.length; i++) { + let situation = parent.situations[i] + if (situation.name === thisObject.payload.node.name) { + label = label + ' #' + (i + 1) + return label + } + } + break + } + case 'Condition': { + let parent = thisObject.payload.parentNode + for (let i = 0; i < parent.conditions.length; i++) { + let condition = parent.conditions[i] + if (condition.name === thisObject.payload.node.name) { + label = label + ' #' + (i + 1) + return label + } + } + break + } + default: { + return label + } + } + } + function drawBodyAndPicture (params) { let position = { x: params.container.frame.position.x, @@ -540,3 +582,4 @@ function newStrategyPart () { } } } + diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index ce1b8d40c..5fe185c67 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -80,33 +80,33 @@ function newStrategy () { createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } @@ -121,15 +121,15 @@ function newStrategy () { chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase') for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } } @@ -144,15 +144,15 @@ function newStrategy () { chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase') for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } } @@ -256,7 +256,7 @@ function newStrategy () { } else { phaseChainParent = phaseParent } - createPart('Phase', phase.name, phase, phaseParent, phaseChainParent, 'Phase' + ' #' + (m + 1)) + createPart('Phase', phase.name, phase, phaseParent, phaseChainParent, 'Phase') } break case 'Add Situation': @@ -268,7 +268,7 @@ function newStrategy () { conditions: [] } phase.situations.push(situation) - createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (m + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation') } break case 'Add Condition': @@ -280,7 +280,7 @@ function newStrategy () { code: '' } situation.conditions.push(condition) - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } break case 'Delete Phase': { From 42968635f702ce7c2d248099d6065552cf902274 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 18:15:01 +0200 Subject: [PATCH 063/143] Use of Ids instead of names to find parts --- FloatingSpace/StrategyPart.js | 6 +++--- StrategySpace/Strategy.js | 17 ++++++++++------- Utilities.js | 9 ++++++++- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6ffd5dda7..7642c3a7f 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -510,7 +510,7 @@ function newStrategyPart () { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.phases.length; i++) { let phase = parent.phases[i] - if (phase.name === thisObject.payload.node.name) { + if (phase.id === thisObject.payload.node.id) { label = label + ' #' + (i + 1) return label } @@ -521,7 +521,7 @@ function newStrategyPart () { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.situations.length; i++) { let situation = parent.situations[i] - if (situation.name === thisObject.payload.node.name) { + if (situation.id === thisObject.payload.node.id) { label = label + ' #' + (i + 1) return label } @@ -532,7 +532,7 @@ function newStrategyPart () { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.conditions.length; i++) { let condition = parent.conditions[i] - if (condition.name === thisObject.payload.node.name) { + if (condition.id === thisObject.payload.node.id) { label = label + ' #' + (i + 1) return label } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 5fe185c67..14c9efb9c 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -66,6 +66,10 @@ function newStrategy () { node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) node.payload = payload + + if (node.id === undefined) { + node.id = newUniqueId() + } } function destroyPart (node) { @@ -245,7 +249,7 @@ function newStrategy () { let phaseParent = payload.node let m = phaseParent.phases.length let phase = { - name: 'New Phase' + ' #' + (m + 1), + name: 'New Phase', code: '', situations: [] } @@ -264,7 +268,7 @@ function newStrategy () { let phase = payload.node let m = phase.situations.length let situation = { - name: 'New Situation' + ' #' + (m + 1), + name: 'New Situation', conditions: [] } phase.situations.push(situation) @@ -276,7 +280,7 @@ function newStrategy () { let situation = payload.node let m = situation.conditions.length let condition = { - name: 'New Condition' + ' #' + (m + 1), + name: 'New Condition', code: '' } situation.conditions.push(condition) @@ -304,7 +308,7 @@ function newStrategy () { let payload = node.payload for (let k = 0; k < payload.parentNode.phases.length; k++) { let phase = payload.parentNode.phases[k] - if (phase.name === node.name) { + if (phase.id === node.id) { for (let j = 0; j < phase.situations.length; j++) { let situation = phase.situations[j] for (let i = 0; i < situation.conditions.length; i++) { @@ -335,7 +339,7 @@ function newStrategy () { let payload = node.payload for (let j = 0; j < payload.parentNode.situations.length; j++) { let situation = payload.parentNode.situations[j] - if (situation.name === node.name) { + if (situation.id === node.id) { for (let i = 0; i < situation.conditions.length; i++) { let condition = situation.conditions[i] destroyPart(condition) @@ -354,7 +358,7 @@ function newStrategy () { let payload = node.payload for (let i = 0; i < payload.parentNode.conditions.length; i++) { let condition = payload.parentNode.conditions[i] - if (condition.name === node.name) { + if (condition.id === node.id) { destroyPart(node) payload.parentNode.conditions.splice(i, 1) cleanNode(condition) @@ -378,4 +382,3 @@ function newStrategy () { node.cleaned = true } } - diff --git a/Utilities.js b/Utilities.js index 663e3eb4b..8f38d99d8 100644 --- a/Utilities.js +++ b/Utilities.js @@ -172,7 +172,7 @@ function loadEmoji (pPath) { function printLabel (labelToPrint, x, y, opacity, fontSize) { let labelPoint - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label = '' + labelToPrint @@ -181,3 +181,10 @@ function printLabel (labelToPrint, x, y, opacity, fontSize) { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' browserCanvasContext.fillText(label, x, y) } + +function newUniqueId () { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8) + return v.toString(16) + }) +} From b19effd58f4e21d42169c0358416a6bad8afde7c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 18:51:52 +0200 Subject: [PATCH 064/143] Preparing to Save the strategy --- FloatingSpace/StrategyPart.js | 35 +++++++++-- StrategySpace/ConstDeleteStrategy.js | 0 StrategySpace/ConstGetStrategies.js | 85 +++++++++++++++++++++++++++ StrategySpace/ConstNewStrategy.js | 0 StrategySpace/ConstUpdateStrategy.js | 0 StrategySpace/Strategy.js | 8 +++ StrategySpace/StrategyCollection.js | 88 +--------------------------- 7 files changed, 123 insertions(+), 93 deletions(-) create mode 100644 StrategySpace/ConstDeleteStrategy.js create mode 100644 StrategySpace/ConstGetStrategies.js create mode 100644 StrategySpace/ConstNewStrategy.js create mode 100644 StrategySpace/ConstUpdateStrategy.js diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 7642c3a7f..0eeb1ed7e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -72,16 +72,28 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ { - action: 'Open Settings', + action: 'Reload Strategy', actionFunction: thisObject.payload.onMenuItemClick, - label: 'Settings', + label: 'Reload Last Saved', visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOn: 'Images/icons/style-01/pixel.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 + angle: -60 + }, + { + action: 'Save Strategy', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Save Changes', + visible: false, + imagePathOn: 'Images/icons/style-01/upload.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 }, { action: 'Delete Strategy', @@ -93,7 +105,19 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -20 + angle: 20 + }, + { + action: 'Open Settings', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 }] break } @@ -582,4 +606,3 @@ function newStrategyPart () { } } } - diff --git a/StrategySpace/ConstDeleteStrategy.js b/StrategySpace/ConstDeleteStrategy.js new file mode 100644 index 000000000..e69de29bb diff --git a/StrategySpace/ConstGetStrategies.js b/StrategySpace/ConstGetStrategies.js new file mode 100644 index 000000000..46acca721 --- /dev/null +++ b/StrategySpace/ConstGetStrategies.js @@ -0,0 +1,85 @@ +const GRAPHQL_QUERY_GET_STRATEGIES = Apollo.gql` + query($fbSlug: String!){ + + strategizer_StrategyByFb(fbSlug: $fbSlug){ + subStrategies(activeOnly: true){ + name + entryPoint{ + situations{ + name + conditions{ + name + code + } + } + } + exitPoint{ + situations{ + name + conditions{ + name + code + } + } + } + sellPoint{ + situations{ + name + conditions{ + name + code + } + } + } + buyPoint{ + situations{ + name + conditions{ + name + code + } + } + } + stopLoss{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + buyOrder{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + sellOrder{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + } + } + } + ` diff --git a/StrategySpace/ConstNewStrategy.js b/StrategySpace/ConstNewStrategy.js new file mode 100644 index 000000000..e69de29bb diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js new file mode 100644 index 000000000..e69de29bb diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 14c9efb9c..af427bb89 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -241,6 +241,14 @@ function newStrategy () { break + case 'Reload Strategy': + + break + + case 'Save Strategy': + + break + case 'Edit Code': break diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 0713e7918..c5f9075c6 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -85,96 +85,10 @@ function newStrategyCollection () { } }]) - const QUERY = Apollo.gql` - query($fbSlug: String!){ - - strategizer_StrategyByFb(fbSlug: $fbSlug){ - subStrategies(activeOnly: true){ - name - entryPoint{ - situations{ - name - conditions{ - name - code - } - } - } - exitPoint{ - situations{ - name - conditions{ - name - code - } - } - } - sellPoint{ - situations{ - name - conditions{ - name - code - } - } - } - buyPoint{ - situations{ - name - conditions{ - name - code - } - } - } - stopLoss{ - phases{ - name - code - situations{ - name - conditions{ - name - code - } - } - } - } - buyOrder{ - phases{ - name - code - situations{ - name - conditions{ - name - code - } - } - } - } - sellOrder{ - phases{ - name - code - situations{ - name - conditions{ - name - code - } - } - } - } - } - } - } - ` - const getStrategies = () => { return new Promise((resolve, reject) => { apolloClient.query({ - query: QUERY, + query: GRAPHQL_QUERY_GET_STRATEGIES, variables: { fbSlug: strategySimulationClone} }) .then(response => { From 702a0b818956e86f5e967dbb376fc4617bdc1f33 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 19:24:27 +0200 Subject: [PATCH 065/143] First Constants at their own file --- StrategySpace/ConstNewStrategy.js | 267 +++++++++++++++++++++++++++ StrategySpace/ConstUpdateStrategy.js | 85 +++++++++ 2 files changed, 352 insertions(+) diff --git a/StrategySpace/ConstNewStrategy.js b/StrategySpace/ConstNewStrategy.js index e69de29bb..197c07277 100644 --- a/StrategySpace/ConstNewStrategy.js +++ b/StrategySpace/ConstNewStrategy.js @@ -0,0 +1,267 @@ + const GRAPHQL_MUTATION_UPDATE_STRATEGY = Apollo.gql` +mutation { + strategizer_EditStrategy( + id: "sdfs" + strategy: { + subStrategies: [ + { + active: true + name: "Trend Following" + entryPoint: { + situations: [ + { + name: "Price Collapsing" + conditions: [ + { + name: "%B Moving Average going down" + code: "percentageBandwidth.previous.direction === 'down' && percentageBandwidth.direction === 'down'" + } + { + name: "%B Bandwidth going up" + code: "percentageBandwidth.previous.previous.bandwidth < percentageBandwidth.previous.bandwidth && percentageBandwidth.previous.bandwidth < percentageBandwidth.bandwidth" + } + { + name: "Candles Min going down" + code: "candle.previous.previous.min > candle.previous.min && candle.previous.min > candle.min" + } + ] + } + ] + } + exitPoint: { + situations: [ + { + name: "Market Reversing" + conditions: [ + { + name: "Close above Band Moving Average" + code: "candle.close > bollingerBand.movingAverage" + } + ] + } + ] + } + sellPoint: { + situations: [ + { + name: "Min below lower bollingerBand." + conditions: [ + { + name: "3 Candles MIN below Lower Band" + code: "candle.previous.previous.min < bollingerBand.previous.previous.movingAverage - bollingerBand.previous.previous.deviation && candle.previous.min < bollingerBand.previous.movingAverage - bollingerBand.previous.deviation && candle.min < bollingerBand.movingAverage - bollingerBand.deviation" + } + ] + } + ] + } + stopLoss: { + phases: [ + { + name: "Following Sell Rate" + code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" + situations: [ + { + name: "Candle below Moving Average" + conditions: [ + { + name: "Candle fully below Band Moving Average" + code: "candle.max < bollingerBand.movingAverage" + } + { + name: "Band Moving Average going down" + code: "bollingerBand.direction === 'down'" + } + ] + } + ] + } + { + name: "Above Bands Moving Average" + code: "newStopLoss = bollingerBand.movingAverage + bollingerBand.movingAverage * (stopLossPercentage - stopLossDecay) / 100" + situations: [ + { + name: "Candle below Moving Average" + conditions: [ + { + name: "Candle MAX below lower band" + code: "candle.max < bollingerBand.movingAverage - bollingerBand.deviation" + } + ] + } + ] + } + { + name: "At Bands Moving Average" + code: "newStopLoss = bollingerBand.movingAverage" + situations: [] + } + ] + } + buyOrder: { + phases: [ + { + name: "12 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 12" + situations: [ + { + name: "Candle cut by lower band" + conditions: [ + { +name: "Max above lower band" + code: "candle.max > bollingerBand.movingAverage - bollingerBand.deviation" + } + { + name: "MIN below lower band" + code: "candle.min < bollingerBand.movingAverage - bollingerBand.deviation" + } + { + name: "Band Moving Average going down" + code: "bollingerBand.previous.movingAverage > bollingerBand.movingAverage" + } + ] + } + ] + } + { + name: "10 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 10" + situations: [ + { + name: "%B starting to revert" + conditions: [ + { + name: "%B Moving Average going up" + code: "percentageBandwidth.direction === 'up'" + } + { + name: "%B Moving Average above 0" + code: "percentageBandwidth.movingAverage > 0" + } + ] + } + ] + } + { + name: "4 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 4" + situations: [ + { + name: "%B going down again" + conditions: [ + { + name: "%B Moving Average going down" + code: "percentageBandwidth.direction === 'down'" + } + ] + } + ] + } + { + name: "3 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 3" + situations: [ + { + name: "%B going up and above 30" + conditions: [ + { + name: "%B Moving Average going up" + code: "percentageBandwidth.direction === 'up'" + } + { + name: "%B Moving Average above 30" + code: "percentageBandwidth.movingAverage > 30" + } + ] + } + ] + } + { + name: "At lower band" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 2" + situations: [] + } + ] + } + } + { + active: true + name: "Range Trading" + entryPoint: { + situations: [ + { + name: "Gentle Up Trend" + conditions: [ + { + name: "Sub-Channel going up" + code: "subChannel.direction === 'up'" + } + { + name: "Sub-Channel Side|Gentle|Medium" + code: "subChannel.slope === 'Side' || subChannel.slope === 'Gentle' || subChannel.slope === 'Medium'" + } + { + name: "Candle Close above Lower Band" + code: "candle.close > bollingerBand.movingAverage + bollingerBand.deviation" + } + ] + } + ] + } + exitPoint: { + situations: [ + { + name: "Outside Sub-Channel" + conditions: [ + { + name: "Going down or too Steep" + code: "subChannel.direction === 'Down' || subChannel.slope === 'Steep' || subChannel.slope === 'Extreme'" + + +} + ] + } + ] + } + sellPoint: { + situations: [ + { + name: "Min below lower bollingerBand." + conditions: [ + { + name: "%B Moving Average going down" + code: "percentageBandwidth.previous.movingAverage > percentageBandwidth.movingAverage" + } + { + name: "%B Moving Average above 90" + code: "percentageBandwidth.previous.movingAverage > 90" + } + ] + } + ] + } + stopLoss: { + phases: [ + { + name: "Following Sell Rate" + code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" + situations: [] + } + ] + } + buyOrder: { + phases: [ + { + name: "Between Band Moving Average and Lower Band" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation" + situations: [] + } + ] + } + } + ] + } + ) { + id + } +} +` diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js index e69de29bb..72be45218 100644 --- a/StrategySpace/ConstUpdateStrategy.js +++ b/StrategySpace/ConstUpdateStrategy.js @@ -0,0 +1,85 @@ +const GRAPHQL_MUTATION_UPDATE_STRATEGY = Apollo.gql` + query($fbSlug: String!){ + + strategizer_StrategyByFb(fbSlug: $fbSlug){ + subStrategies(activeOnly: true){ + name + entryPoint{ + situations{ + name + conditions{ + name + code + } + } + } + exitPoint{ + situations{ + name + conditions{ + name + code + } + } + } + sellPoint{ + situations{ + name + conditions{ + name + code + } + } + } + buyPoint{ + situations{ + name + conditions{ + name + code + } + } + } + stopLoss{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + buyOrder{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + sellOrder{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + } + } + } + ` From 42d9fc7e2c1b7f7b0a1258786ed82ab01c9ae5b8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 08:04:57 +0200 Subject: [PATCH 066/143] Part Title as different object --- FloatingSpace/FloatingObject.js | 4 +- FloatingSpace/StrategyPart.js | 53 +++--- FloatingSpace/StrategyPartTitle.js | 171 ++++++++++++++++++ FloatingSpace/StrategyParts.js | 10 +- StrategySpace/ConstNewStrategy.js | 267 ----------------------------- StrategySpace/Strategy.js | 6 +- 6 files changed, 202 insertions(+), 309 deletions(-) create mode 100644 FloatingSpace/StrategyPartTitle.js diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 560f1d3d5..d4c27396d 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -66,7 +66,7 @@ function newFloatingObject () { thisObject.underlayingObject = undefined } - function initialize (pType, pSubType, floatingLayer) { + function initialize (pType, floatingLayer) { switch (pType) { case 'Profile Ball': { @@ -82,7 +82,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) + thisObject.underlayingObject.initialize(floatingLayer, thisObject.payload) thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) break } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 0eeb1ed7e..b70212ae2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -13,6 +13,7 @@ function newStrategyPart () { container: undefined, payload: undefined, codeEditor: undefined, + partTitle: undefined, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -51,6 +52,8 @@ function newStrategyPart () { thisObject.payload = undefined thisObject.menu.finalize() thisObject.menu = undefined + thisObject.partTitle.finalize() + thisObject.partTitle = undefined if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.finalize() @@ -62,12 +65,12 @@ function newStrategyPart () { imagePath = undefined } - function initialize (pFloatingLayer, pType, pPayload) { - thisObject.payload = pPayload + function initialize (pFloatingLayer, payload) { + thisObject.payload = payload floatingLayer = pFloatingLayer let menuItemsInitialValues = [] - switch (pType) { + switch (thisObject.payload.node.type) { case 'Strategy': { imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ @@ -314,14 +317,22 @@ function newStrategyPart () { break } default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + pType) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + thisObject.payload.node.type) } } } +/* Initialize the Menu */ + thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues, thisObject.payload) thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) +/* Initialize Part Title */ + + thisObject.partTitle = newStrategyPartTitle() + thisObject.partTitle.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) + thisObject.partTitle.initialize(thisObject.payload) + /* Load Part Image */ if (imagePath !== undefined) { @@ -342,6 +353,9 @@ function newStrategyPart () { function getContainer (point) { let container + container = thisObject.partTitle.getContainer(point) + if (container !== undefined) { return container } + container = thisObject.menu.getContainer(point) if (container !== undefined) { return container } @@ -354,6 +368,7 @@ function newStrategyPart () { function physics () { thisObject.menu.physics() + thisObject.partTitle.physics() if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.physics() @@ -371,10 +386,6 @@ function newStrategyPart () { function onNotFocus () { thisObject.isOnFocus = false - - if (thisObject.codeEditor !== undefined) { - thisObject.codeEditor.deactivate() - } } function onMouseClick (event) { @@ -391,6 +402,7 @@ function newStrategyPart () { function drawMiddleground (params) { if (thisObject.isOnFocus === false) { drawText(params) + thisObject.partTitle.draw(params) } } @@ -412,6 +424,7 @@ function newStrategyPart () { } drawText(params) + thisObject.partTitle.draw(params) if (thisObject.codeEditor !== undefined) { if (thisObject.codeEditor.visible === false) { @@ -481,30 +494,6 @@ function newStrategyPart () { let fontSize = params.currentFontSize let label - if (radius > 6 && thisObject.isOnFocus === true) { - const MAX_LABEL_LENGTH = 25 - - browserCanvasContext.strokeStyle = params.labelStrokeStyle - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - label = params.payload.downLabel - - if (label !== undefined) { - if (label.length > MAX_LABEL_LENGTH) { - label = label.substring(0, MAX_LABEL_LENGTH) + '...' - } - - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = params.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } if (radius > 6) { const MAX_LABEL_LENGTH = 30 diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js new file mode 100644 index 000000000..fddf36c15 --- /dev/null +++ b/FloatingSpace/StrategyPartTitle.js @@ -0,0 +1,171 @@ + +function newStrategyPartTitle () { + const MODULE_NAME = 'Strategy Part Title' + const ERROR_LOG = true + + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + payload: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + finalize: finalize, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + + let selfFocusEventSubscriptionId + let selfNotFocuskEventSubscriptionId + let selfMouseClickEventSubscriptionId + + return thisObject + + function finalize () { + thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.payload = undefined + } + + function initialize (payload) { + thisObject.payload = payload + + switch (payload.node.type) { + case 'Strategy': { + break + } + case 'Strategy Entry Event': { + break + } + case 'Strategy Exit Event': { + break + } + case 'Trade Entry Event': { + break + } + case 'Stop': { + break + } + case 'Take Profit': { + break + } + case 'Phase': { + break + } + case 'Situation': { + break + } + case 'Condition': { + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } + } + } + + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + } + + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + thisObject.container.frame.position.x = 0 - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2 + thisObject.container.frame.position.y = 0 - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + + thisObject.container.frame.width = thisObject.container.frame.radius + thisObject.container.frame.height = 20 + } + + function onFocus () { + thisObject.isOnFocus = true + } + + function onNotFocus () { + thisObject.isOnFocus = false + } + + function onMouseClick (event) { + + } + + function draw (params) { + if (thisObject.isOnFocus === true) { + drawText(params) + } + } + + function drawText (params) { +/* Text Follows */ + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + let backgroundParams = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.RED, + castShadow: false, + opacity: 1 + } + + roundedCornersBackground(backgroundParams) + + let radius = thisObject.container.frame.radius + /* Label Text */ + let labelPoint + let fontSize = params.currentFontSize + let label + + if (radius > 6 && thisObject.isOnFocus === true) { + const MAX_LABEL_LENGTH = 25 + + browserCanvasContext.strokeStyle = params.labelStrokeStyle + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + label = params.payload.downLabel + + if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = params.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } +} + diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index f53cf01eb..25391cacc 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -26,15 +26,14 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (type, payload) { + function createNewStrategyPart (payload) { let floatingObject = newFloatingObject() floatingObject.payload = payload - floatingObject.initialize('Strategy Part', type, floatingLayer) - floatingObject.underlayingObject.type = type // after initialize + floatingObject.initialize('Strategy Part', payload.node.type, floatingLayer) const FRICTION = 0.97 - switch (type) { + switch (payload.node.type) { case 'Strategy': { level_1() break @@ -76,7 +75,7 @@ function newStrategyParts () { break } default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } return } } @@ -147,3 +146,4 @@ function newStrategyParts () { floatingLayer.killFloatingObject(pFloatingObjectHandle) } } + diff --git a/StrategySpace/ConstNewStrategy.js b/StrategySpace/ConstNewStrategy.js index 197c07277..e69de29bb 100644 --- a/StrategySpace/ConstNewStrategy.js +++ b/StrategySpace/ConstNewStrategy.js @@ -1,267 +0,0 @@ - const GRAPHQL_MUTATION_UPDATE_STRATEGY = Apollo.gql` -mutation { - strategizer_EditStrategy( - id: "sdfs" - strategy: { - subStrategies: [ - { - active: true - name: "Trend Following" - entryPoint: { - situations: [ - { - name: "Price Collapsing" - conditions: [ - { - name: "%B Moving Average going down" - code: "percentageBandwidth.previous.direction === 'down' && percentageBandwidth.direction === 'down'" - } - { - name: "%B Bandwidth going up" - code: "percentageBandwidth.previous.previous.bandwidth < percentageBandwidth.previous.bandwidth && percentageBandwidth.previous.bandwidth < percentageBandwidth.bandwidth" - } - { - name: "Candles Min going down" - code: "candle.previous.previous.min > candle.previous.min && candle.previous.min > candle.min" - } - ] - } - ] - } - exitPoint: { - situations: [ - { - name: "Market Reversing" - conditions: [ - { - name: "Close above Band Moving Average" - code: "candle.close > bollingerBand.movingAverage" - } - ] - } - ] - } - sellPoint: { - situations: [ - { - name: "Min below lower bollingerBand." - conditions: [ - { - name: "3 Candles MIN below Lower Band" - code: "candle.previous.previous.min < bollingerBand.previous.previous.movingAverage - bollingerBand.previous.previous.deviation && candle.previous.min < bollingerBand.previous.movingAverage - bollingerBand.previous.deviation && candle.min < bollingerBand.movingAverage - bollingerBand.deviation" - } - ] - } - ] - } - stopLoss: { - phases: [ - { - name: "Following Sell Rate" - code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" - situations: [ - { - name: "Candle below Moving Average" - conditions: [ - { - name: "Candle fully below Band Moving Average" - code: "candle.max < bollingerBand.movingAverage" - } - { - name: "Band Moving Average going down" - code: "bollingerBand.direction === 'down'" - } - ] - } - ] - } - { - name: "Above Bands Moving Average" - code: "newStopLoss = bollingerBand.movingAverage + bollingerBand.movingAverage * (stopLossPercentage - stopLossDecay) / 100" - situations: [ - { - name: "Candle below Moving Average" - conditions: [ - { - name: "Candle MAX below lower band" - code: "candle.max < bollingerBand.movingAverage - bollingerBand.deviation" - } - ] - } - ] - } - { - name: "At Bands Moving Average" - code: "newStopLoss = bollingerBand.movingAverage" - situations: [] - } - ] - } - buyOrder: { - phases: [ - { - name: "12 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 12" - situations: [ - { - name: "Candle cut by lower band" - conditions: [ - { -name: "Max above lower band" - code: "candle.max > bollingerBand.movingAverage - bollingerBand.deviation" - } - { - name: "MIN below lower band" - code: "candle.min < bollingerBand.movingAverage - bollingerBand.deviation" - } - { - name: "Band Moving Average going down" - code: "bollingerBand.previous.movingAverage > bollingerBand.movingAverage" - } - ] - } - ] - } - { - name: "10 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 10" - situations: [ - { - name: "%B starting to revert" - conditions: [ - { - name: "%B Moving Average going up" - code: "percentageBandwidth.direction === 'up'" - } - { - name: "%B Moving Average above 0" - code: "percentageBandwidth.movingAverage > 0" - } - ] - } - ] - } - { - name: "4 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 4" - situations: [ - { - name: "%B going down again" - conditions: [ - { - name: "%B Moving Average going down" - code: "percentageBandwidth.direction === 'down'" - } - ] - } - ] - } - { - name: "3 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 3" - situations: [ - { - name: "%B going up and above 30" - conditions: [ - { - name: "%B Moving Average going up" - code: "percentageBandwidth.direction === 'up'" - } - { - name: "%B Moving Average above 30" - code: "percentageBandwidth.movingAverage > 30" - } - ] - } - ] - } - { - name: "At lower band" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 2" - situations: [] - } - ] - } - } - { - active: true - name: "Range Trading" - entryPoint: { - situations: [ - { - name: "Gentle Up Trend" - conditions: [ - { - name: "Sub-Channel going up" - code: "subChannel.direction === 'up'" - } - { - name: "Sub-Channel Side|Gentle|Medium" - code: "subChannel.slope === 'Side' || subChannel.slope === 'Gentle' || subChannel.slope === 'Medium'" - } - { - name: "Candle Close above Lower Band" - code: "candle.close > bollingerBand.movingAverage + bollingerBand.deviation" - } - ] - } - ] - } - exitPoint: { - situations: [ - { - name: "Outside Sub-Channel" - conditions: [ - { - name: "Going down or too Steep" - code: "subChannel.direction === 'Down' || subChannel.slope === 'Steep' || subChannel.slope === 'Extreme'" - - -} - ] - } - ] - } - sellPoint: { - situations: [ - { - name: "Min below lower bollingerBand." - conditions: [ - { - name: "%B Moving Average going down" - code: "percentageBandwidth.previous.movingAverage > percentageBandwidth.movingAverage" - } - { - name: "%B Moving Average above 90" - code: "percentageBandwidth.previous.movingAverage > 90" - } - ] - } - ] - } - stopLoss: { - phases: [ - { - name: "Following Sell Rate" - code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" - situations: [] - } - ] - } - buyOrder: { - phases: [ - { - name: "Between Band Moving Average and Lower Band" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation" - situations: [] - } - ] - } - } - ] - } - ) { - id - } -} -` diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index af427bb89..2567cbc9d 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -64,12 +64,12 @@ function newStrategy () { payload.chainParent = chainParent payload.onMenuItemClick = onMenuItemClick - node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) - node.payload = payload - if (node.id === undefined) { node.id = newUniqueId() } + node.payload = payload + node.type = partType + node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(payload) } function destroyPart (node) { From e10425f85253897fdf9254ee86fa3b76b3a3356a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 08:07:43 +0200 Subject: [PATCH 067/143] Refactoring to Constructor --- FloatingSpace/{StrategyParts.js => StrategyPartConstructor.js} | 3 +-- Spaces/FloatingSpace.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) rename FloatingSpace/{StrategyParts.js => StrategyPartConstructor.js} (98%) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyPartConstructor.js similarity index 98% rename from FloatingSpace/StrategyParts.js rename to FloatingSpace/StrategyPartConstructor.js index 25391cacc..93a2c1d85 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -1,5 +1,5 @@ -function newStrategyParts () { +function newStrategyPartConstructor () { const MODULE_NAME = 'Strategy Parts' const ERROR_LOG = true const logger = newWebDebugLog() @@ -146,4 +146,3 @@ function newStrategyParts () { floatingLayer.killFloatingObject(pFloatingObjectHandle) } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index d234f61e5..14ea12a3b 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -55,7 +55,7 @@ function newFloatingSpace () { thisObject.noteSets = newNoteSets() thisObject.noteSets.initialize(thisObject.floatingLayer) - thisObject.strategyParts = newStrategyParts() + thisObject.strategyParts = newStrategyPartConstructor() thisObject.strategyParts.initialize(thisObject.floatingLayer) thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) From 8bad7502109307655cfa0faf06dfa1b6568e6e69 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 09:01:46 +0200 Subject: [PATCH 068/143] Big reorg of where things are, departure from Profile Balls and Notes --- FloatingSpace/FloatingLayer.js | 12 +++--- FloatingSpace/FloatingObject.js | 52 ++++++------------------ FloatingSpace/NoteSets.js | 4 +- FloatingSpace/ProfileBall.js | 4 +- FloatingSpace/ProfileBalls.js | 2 +- FloatingSpace/StrategyPart.js | 7 +--- FloatingSpace/StrategyPartConstructor.js | 30 ++++++++++---- FloatingSpace/StrategyPartTitle.js | 7 ++-- PlottersManager.js | 6 +-- Spaces/FloatingSpace.js | 8 ++-- StrategySpace/Strategy.js | 14 +++---- 11 files changed, 64 insertions(+), 82 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index d1dc9a1d1..db281d20f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -22,7 +22,7 @@ function newFloatingLayer () { let thisObject = { addFloatingObject: addFloatingObject, - killFloatingObject: killFloatingObject, + removeFloatingObject: removeFloatingObject, getFloatingObject: getFloatingObject, physics: physics, changeTargetRepulsion: changeTargetRepulsion, @@ -91,7 +91,7 @@ function newFloatingLayer () { invisibleFloatingObjects.push(pFloatingObject) } - function killFloatingObject (pFloatingObjectHandle) { + function removeFloatingObject (pFloatingObjectHandle) { try { /* The floting object to be killed can be either at the visible or the invisible array. What we do here is look for it @@ -121,11 +121,11 @@ function newFloatingLayer () { } } - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object Not Found.') } - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object cannot be killed.') } - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> pFloatingObjectHandle = ' + pFloatingObjectHandle) } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> Floating Object Not Found.') } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> Floating Object cannot be killed.') } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> pFloatingObjectHandle = ' + pFloatingObjectHandle) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> err= ' + err.stack) } } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index d4c27396d..743726606 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -12,7 +12,6 @@ function newFloatingObject () { isOnFocus: false, payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. - underlayingObject: undefined, currentSpeed: 0, // This is the current speed of the floating object. currentMass: 0, // This is the current mass of the floating object, including its zoom applied. friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. @@ -62,38 +61,11 @@ function newFloatingObject () { thisObject.container.finalize() thisObject.container = undefined thisObject.payload = undefined - thisObject.underlayingObject.finalize() - thisObject.underlayingObject = undefined } - function initialize (pType, floatingLayer) { - switch (pType) { - - case 'Profile Ball': { - thisObject.underlayingObject = newProfileBall() - thisObject.underlayingObject.initialize() - break - } - case 'Note': { - thisObject.underlayingObject = newNote() - thisObject.underlayingObject.initialize() - break - } - - case 'Strategy Part': { - thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, thisObject.payload) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - break - } - } - - thisObject.type = pType + function initialize (type, payload) { + thisObject.payload = payload + thisObject.type = type selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -111,7 +83,7 @@ function newFloatingObject () { function getContainer (point) { let container - container = thisObject.underlayingObject.getContainer(point) + container = thisObject.payload.uiObject.getContainer(point) if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { @@ -123,7 +95,7 @@ function newFloatingObject () { function physics () { thisObjectPhysics() - thisObject.underlayingObject.physics() + thisObject.payload.uiObject.physics() } function thisObjectPhysics () { @@ -176,7 +148,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onFocus', point) + thisObject.payload.uiObject.container.eventHandler.raiseEvent('onFocus', point) thisObject.positionLocked = true @@ -201,7 +173,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onNotFocus') + thisObject.payload.uiObject.container.eventHandler.raiseEvent('onNotFocus') thisObject.positionLocked = false thisObject.isOnFocus = false @@ -213,23 +185,23 @@ function newFloatingObject () { point: pPoint, parent: thisObject } - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseClick', event) + thisObject.payload.uiObject.container.eventHandler.raiseEvent('onMouseClick', event) } function drawBackground () { - thisObject.underlayingObject.drawBackground(thisObject) + thisObject.payload.uiObject.drawBackground(thisObject) } function drawMiddleground () { - thisObject.underlayingObject.drawMiddleground(thisObject) + thisObject.payload.uiObject.drawMiddleground(thisObject) } function drawForeground () { - thisObject.underlayingObject.drawForeground(thisObject) + thisObject.payload.uiObject.drawForeground(thisObject) } function drawOnFocus () { - thisObject.underlayingObject.drawOnFocus(thisObject) + thisObject.payload.uiObject.drawOnFocus(thisObject) } function initializeMass (suggestedValue) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index e0a5d8093..f61a55c67 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -124,7 +124,7 @@ function newNoteSets () { Each time we identify a floatingObject that is not at the raw data anymore, we request the floatinglayer to kill it. */ - floatingLayer.killFloatingObject(floatingNote.floatingHandle) + floatingLayer.removeFloatingObject(floatingNote.floatingHandle) } else { newFloatingNotes.push(floatingNote) @@ -299,7 +299,7 @@ function newNoteSets () { for (let j = 0; j < noteSet.floatingNotes.length; j++) { let floatingNote = noteSet.floatingNotes[j] - floatingLayer.killFloatingObject(floatingNote.floatingHandle) + floatingLayer.removeFloatingObject(floatingNote.floatingHandle) } noteSets.splice(i, 1) // Delete item from array. diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 8328b7b25..c940bfbd1 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -306,7 +306,7 @@ function newProfileBall () { let label - label = pFloatingObject.payload.profile.upLabel + label = pFloatingObject.payload.profile.subTitle if (label !== undefined) { labelPoint = { @@ -319,7 +319,7 @@ function newProfileBall () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - label = pFloatingObject.payload.profile.downLabel + label = pFloatingObject.payload.profile.title if (label !== undefined) { labelPoint = { diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 98d4de498..45f53e013 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -56,7 +56,7 @@ function newProfileBalls () { } function destroyProfileBall (pFloatingObjectHandle) { - floatingLayer.killFloatingObject(pFloatingObjectHandle) + floatingLayer.removeFloatingObject(pFloatingObjectHandle) } } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b70212ae2..888c9292b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -32,7 +32,6 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let floatingLayer let image let imagePath @@ -60,14 +59,12 @@ function newStrategyPart () { thisObject.codeEditor = undefined } - floatingLayer = undefined image = undefined imagePath = undefined } - function initialize (pFloatingLayer, payload) { + function initialize (payload) { thisObject.payload = payload - floatingLayer = pFloatingLayer let menuItemsInitialValues = [] switch (thisObject.payload.node.type) { @@ -497,7 +494,7 @@ function newStrategyPart () { if (radius > 6) { const MAX_LABEL_LENGTH = 30 - label = params.payload.upLabel + label = params.payload.subTitle label = addIndexNumber(label) if (label !== undefined) { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 93a2c1d85..6b848c628 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -1,13 +1,13 @@ function newStrategyPartConstructor () { - const MODULE_NAME = 'Strategy Parts' + const MODULE_NAME = 'Strategy Part Constructor' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME let thisObject = { - createNewStrategyPart: createNewStrategyPart, + createStrategyPart: createStrategyPart, destroyStrategyPart: destroyStrategyPart, initialize: initialize, finalize: finalize @@ -20,16 +20,24 @@ function newStrategyPartConstructor () { function finalize () { floatingLayer = undefined + + payload.uiObject.finalize() + payload.uiObject = undefined } function initialize (pFloatingLayer) { floatingLayer = pFloatingLayer } - function createNewStrategyPart (payload) { + function createStrategyPart (payload) { let floatingObject = newFloatingObject() - floatingObject.payload = payload - floatingObject.initialize('Strategy Part', payload.node.type, floatingLayer) + floatingObject.initialize('Strategy Part', payload) + payload.floatingObject = floatingObject + + let strategyPart = newStrategyPart() + strategyPart.initialize(payload) + strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true) + payload.uiObject = strategyPart const FRICTION = 0.97 @@ -139,10 +147,16 @@ function newStrategyPartConstructor () { floatingLayer.addFloatingObject(floatingObject) - return floatingObject.handle + return } - function destroyStrategyPart (pFloatingObjectHandle) { - floatingLayer.killFloatingObject(pFloatingObjectHandle) + function destroyStrategyPart (payload) { + floatingLayer.removeFloatingObject(payload.floatingObject.handle) + + payload.floatingObject.finalize() + payload.floatingObject = undefined + + payload.uiObject.finalize() + payload.uiObject = undefined } } diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index fddf36c15..9428289be 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -93,8 +93,8 @@ function newStrategyPartTitle () { thisObject.container.frame.position.x = 0 - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2 thisObject.container.frame.position.y = 0 - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - thisObject.container.frame.width = thisObject.container.frame.radius - thisObject.container.frame.height = 20 + // thisObject.container.frame.width = thisObject.container.frame.radius + // thisObject.container.frame.height = 20 } function onFocus () { @@ -149,7 +149,7 @@ function newStrategyPartTitle () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - label = params.payload.downLabel + label = params.payload.title if (label !== undefined) { if (label.length > MAX_LABEL_LENGTH) { @@ -168,4 +168,3 @@ function newStrategyPartTitle () { } } } - diff --git a/PlottersManager.js b/PlottersManager.js index d3c00d03f..dd693d6d6 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -285,7 +285,7 @@ function newPlottersManager () { botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) - competitionPlotter.plotter.payload[k].profile.downLabel = bot.displayName + competitionPlotter.plotter.payload[k].profile.title = bot.displayName competitionPlotter.plotter.payload[k].profile.imageId = imageId competitionPlotter.plotter.payload[k].profile.botAvatar = botAvatar @@ -525,8 +525,8 @@ function newPlottersManager () { if (productPlotter.plotter.payload !== undefined) { let imageId = pProductCard.bot.devTeam + '.' + pProductCard.bot.profilePicture - productPlotter.plotter.payload.profile.upLabel = pProductCard.product.shortDisplayName - productPlotter.plotter.payload.profile.downLabel = pProductCard.bot.displayName + productPlotter.plotter.payload.profile.subTitle = pProductCard.product.shortDisplayName + productPlotter.plotter.payload.profile.title = pProductCard.bot.displayName productPlotter.plotter.payload.profile.imageId = imageId productPlotter.plotter.payload.profile.botAvatar = pProductCard.bot.avatar diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 14ea12a3b..f11be01dd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -10,7 +10,7 @@ function newFloatingSpace () { let thisObject = { floatingLayer: undefined, // This is the array of floatingObjects being displayed profileBalls: undefined, - strategyParts: undefined, + strategyPartConstructor: undefined, noteSets: undefined, container: undefined, makeVisible: makeVisible, @@ -41,7 +41,7 @@ function newFloatingSpace () { function finalize () { thisObject.floatingLayer.finalize() thisObject.profileBalls.finalize() - thisObject.strategyParts.finalize() + thisObject.strategyPartConstructor.finalize() thisObject.noteSets.finalize() } @@ -55,8 +55,8 @@ function newFloatingSpace () { thisObject.noteSets = newNoteSets() thisObject.noteSets.initialize(thisObject.floatingLayer) - thisObject.strategyParts = newStrategyPartConstructor() - thisObject.strategyParts.initialize(thisObject.floatingLayer) + thisObject.strategyPartConstructor = newStrategyPartConstructor() + thisObject.strategyPartConstructor.initialize(thisObject.floatingLayer) thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 2567cbc9d..5ca65a714 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -52,13 +52,13 @@ function newStrategy () { } if (title !== undefined) { - payload.upLabel = title + payload.subTitle = title } else { - payload.upLabel = partType + payload.subTitle = partType } payload.visible = true - payload.downLabel = name + payload.title = name payload.node = node payload.parentNode = parentNode payload.chainParent = chainParent @@ -69,11 +69,11 @@ function newStrategy () { } node.payload = payload node.type = partType - node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(payload) + canvas.floatingSpace.strategyPartConstructor.createStrategyPart(payload) } function destroyPart (node) { - canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) + canvas.floatingSpace.strategyPartConstructor.destroyStrategyPart(payload) } function generateStrategyParts () { @@ -379,8 +379,8 @@ function newStrategy () { node.payload.targetPosition.x = undefined node.payload.targetPosition.y = undefined node.payload.visible = undefined - node.payload.upLabel = undefined - node.payload.downLabel = undefined + node.payload.subTitle = undefined + node.payload.title = undefined node.payload.node = undefined node.payload.parentNode = undefined node.payload.chainParent = undefined From 5aff61371077556590cbf383c7e2b9c9effbea76 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 09:49:01 +0200 Subject: [PATCH 069/143] Title Object done --- FloatingSpace/CodeEditor.js | 4 +- FloatingSpace/StrategyPartTitle.js | 60 ++++++++++++++++-------------- 2 files changed, 34 insertions(+), 30 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index d606461f9..0a955e3c2 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -3,7 +3,6 @@ function newCodeEditor () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { - isDeployed: undefined, iconOK: undefined, iconNOT_OK: undefined, visible: false, @@ -116,7 +115,7 @@ function newCodeEditor () { function getContainer (point) { let container - if (thisObject.isDeployed === true) { + if (thisObject.visitble === true) { if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { return thisObject.container } else { @@ -214,4 +213,3 @@ function newCodeEditor () { } } } - diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 9428289be..494a3b545 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -90,11 +90,13 @@ function newStrategyPartTitle () { } function physics () { - thisObject.container.frame.position.x = 0 - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2 - thisObject.container.frame.position.y = 0 - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + const FRAME_HEIGHT = 25 + const FRAME_WIDTH = thisObject.payload.title.length / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 + thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2 + thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO - 10 - FRAME_HEIGHT - // thisObject.container.frame.width = thisObject.container.frame.radius - // thisObject.container.frame.height = 20 + thisObject.container.frame.width = FRAME_WIDTH + thisObject.container.frame.height = FRAME_HEIGHT } function onFocus () { @@ -109,47 +111,48 @@ function newStrategyPartTitle () { } - function draw (params) { + function draw () { if (thisObject.isOnFocus === true) { - drawText(params) + if (thisObject.payload.uiObject.codeEditor !== undefined) { + if (thisObject.payload.uiObject.codeEditor.visible !== true) { + drawTitleBackground() + } + } else { + drawTitleBackground() + } + + drawText() } } - function drawText (params) { -/* Text Follows */ - let position = { - x: 0, - y: 0 - } - - position = thisObject.container.frame.frameThisPoint(position) - - let backgroundParams = { + function drawTitleBackground () { + let params = { cornerRadius: 3, lineWidth: 0.1, container: thisObject.container, - borderColor: UI_COLOR.DARK, - backgroundColor: UI_COLOR.RED, + borderColor: UI_COLOR.BLACK, + backgroundColor: UI_COLOR.BLACK, castShadow: false, - opacity: 1 + opacity: 0.25 } - roundedCornersBackground(backgroundParams) + roundedCornersBackground(params) + } + function drawText () { let radius = thisObject.container.frame.radius - /* Label Text */ let labelPoint - let fontSize = params.currentFontSize + let fontSize = thisObject.payload.floatingObject.currentFontSize let label if (radius > 6 && thisObject.isOnFocus === true) { const MAX_LABEL_LENGTH = 25 - browserCanvasContext.strokeStyle = params.labelStrokeStyle + browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - label = params.payload.title + label = thisObject.payload.title if (label !== undefined) { if (label.length > MAX_LABEL_LENGTH) { @@ -157,14 +160,17 @@ function newStrategyPartTitle () { } labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + x: 0, + y: thisObject.container.frame.height * 0.8 } + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = params.labelStrokeStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } } } + From bac3f0ac5f4b00d9358820790fddd8eb83ba4886 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 09:59:39 +0200 Subject: [PATCH 070/143] codeEditor cleaned and working --- FloatingSpace/CodeEditor.js | 27 --------------------------- FloatingSpace/StrategyPart.js | 3 +++ 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 0a955e3c2..36a78e68e 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -36,16 +36,9 @@ function newCodeEditor () { let isMouseOver = false - let selfMouseOverEventSubscriptionId - let selfMouseClickEventSubscriptionId - let selfMouseNotOverEventSubscriptionId return thisObject function finalize () { - thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) - thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) - thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId) - thisObject.container.finalize() thisObject.container = undefined thisObject.iconOK = undefined @@ -70,10 +63,6 @@ function newCodeEditor () { } thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK thisObject.icon = thisObject.iconOK // The default value is ON. - - selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function deactivate () { @@ -137,22 +126,6 @@ function newCodeEditor () { thisObject.container.frame.position.y = 0 } - function onMouseOver (point) { - if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { - isMouseOver = true - } else { - isMouseOver = false - } - } - - function onMouseNotOver (point) { - isMouseOver = false - } - - function onMouseClick (event) { - - } - function drawBackground () { if (thisObject.visible === true) { let position = { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 888c9292b..db1072685 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -383,6 +383,9 @@ function newStrategyPart () { function onNotFocus () { thisObject.isOnFocus = false + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.deactivate() + } } function onMouseClick (event) { From 1e4398b1453c99b5bab9eee989a4a2589c2fe21a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 10:08:37 +0200 Subject: [PATCH 071/143] Cleaned passig floating object as a referrence on draw functions --- FloatingSpace/FloatingObject.js | 8 +++--- FloatingSpace/StrategyPart.js | 48 ++++++++++++++++++--------------- 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 743726606..85d610619 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -189,19 +189,19 @@ function newFloatingObject () { } function drawBackground () { - thisObject.payload.uiObject.drawBackground(thisObject) + thisObject.payload.uiObject.drawBackground() } function drawMiddleground () { - thisObject.payload.uiObject.drawMiddleground(thisObject) + thisObject.payload.uiObject.drawMiddleground() } function drawForeground () { - thisObject.payload.uiObject.drawForeground(thisObject) + thisObject.payload.uiObject.drawForeground() } function drawOnFocus () { - thisObject.payload.uiObject.drawOnFocus(thisObject) + thisObject.payload.uiObject.drawOnFocus() } function initializeMass (suggestedValue) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index db1072685..9bb28fdac 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -392,28 +392,28 @@ function newStrategyPart () { } - function drawBackground (params) { + function drawBackground () { if (thisObject.isOnFocus === false) { drawConnectingLine() thisObject.menu.drawBackground() } } - function drawMiddleground (params) { + function drawMiddleground () { if (thisObject.isOnFocus === false) { - drawText(params) - thisObject.partTitle.draw(params) + drawText() + thisObject.partTitle.draw() } } - function drawForeground (params) { + function drawForeground () { if (thisObject.isOnFocus === false) { - drawBodyAndPicture(params) + drawBodyAndPicture() thisObject.menu.drawForeground() } } - function drawOnFocus (params) { + function drawOnFocus () { if (thisObject.isOnFocus === true) { drawConnectingLine() thisObject.menu.drawBackground() @@ -423,16 +423,16 @@ function newStrategyPart () { thisObject.codeEditor.drawForeground() } - drawText(params) - thisObject.partTitle.draw(params) + drawText() + thisObject.partTitle.draw() if (thisObject.codeEditor !== undefined) { if (thisObject.codeEditor.visible === false) { - drawBodyAndPicture(params) + drawBodyAndPicture() thisObject.menu.drawForeground() } } else { - drawBodyAndPicture(params) + drawBodyAndPicture() thisObject.menu.drawForeground() } } @@ -479,7 +479,7 @@ function newStrategyPart () { } } - function drawText (params) { + function drawText () { /* Text Follows */ let position = { x: 0, @@ -491,13 +491,13 @@ function newStrategyPart () { let radius = thisObject.container.frame.radius /* Label Text */ let labelPoint - let fontSize = params.currentFontSize + let fontSize = thisObject.payload.floatingObject.currentFontSize let label if (radius > 6) { const MAX_LABEL_LENGTH = 30 - label = params.payload.subTitle + label = thisObject.payload.subTitle label = addIndexNumber(label) if (label !== undefined) { @@ -511,7 +511,7 @@ function newStrategyPart () { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = params.labelStrokeStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } @@ -558,13 +558,15 @@ function newStrategyPart () { } } - function drawBodyAndPicture (params) { + function drawBodyAndPicture () { let position = { - x: params.container.frame.position.x, - y: params.container.frame.position.y + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y } - let radius = params.container.frame.radius + position = thisObject.container.frame.frameThisPoint(position) + + let radius = thisObject.container.frame.radius if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ @@ -573,7 +575,7 @@ function newStrategyPart () { browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() - browserCanvasContext.fillStyle = params.fillStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.fillStyle browserCanvasContext.fill() @@ -590,7 +592,11 @@ function newStrategyPart () { if (image !== undefined) { if (image.canDrawIcon === true) { - browserCanvasContext.drawImage(image, position.x - params.currentImageSize / 2, position.y - params.currentImageSize / 2, params.currentImageSize, params.currentImageSize) + browserCanvasContext.drawImage( + image, position.x - thisObject.payload.floatingObject.currentImageSize / 2, + position.y - thisObject.payload.floatingObject.currentImageSize / 2, + thisObject.payload.floatingObject.currentImageSize, + thisObject.payload.floatingObject.currentImageSize) } } } From 5232056822ade898ce4759e98e86f68e49adf798 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 10:20:58 +0200 Subject: [PATCH 072/143] Creating and Destroying objects working well again --- FloatingSpace/FloatingLayer.js | 16 ---------------- StrategySpace/Strategy.js | 2 +- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index db281d20f..cade6407a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -80,12 +80,6 @@ function newFloatingLayer () { } function addFloatingObject (pFloatingObject) { - /* - As you can see here, even though the floating objects are created outside this layer, its creator it is not supossed to keep - the reference to the object, so that the managment of the objects references can live entirely inside this module. What the - creator keeps, is a handle to the object which it can use to retrieve the floating object when needed. - */ - currentHandle++ pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); invisibleFloatingObjects.push(pFloatingObject) @@ -93,19 +87,11 @@ function newFloatingLayer () { function removeFloatingObject (pFloatingObjectHandle) { try { - /* - The floting object to be killed can be either at the visible or the invisible array. What we do here is look for it - at each of the arrays until we find it. Once found, we remove it and is sent to the dying floating objects array. - */ - for (let i = 0; i < invisibleFloatingObjects.length; i++) { let floatingObject = invisibleFloatingObjects[i] if (floatingObject.handle === pFloatingObjectHandle) { invisibleFloatingObjects.splice(i, 1) // Delete item from array. - - floatingObject.finalize() - return } } @@ -115,8 +101,6 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { visibleFloatingObjects.splice(i, 1) // Delete item from array. - - floatingObject.finalize() return } } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 5ca65a714..c37ca321a 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -73,7 +73,7 @@ function newStrategy () { } function destroyPart (node) { - canvas.floatingSpace.strategyPartConstructor.destroyStrategyPart(payload) + canvas.floatingSpace.strategyPartConstructor.destroyStrategyPart(node.payload) } function generateStrategyParts () { From 13deb2658bc61f12c2f489fd791b45d058623888 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 10:26:33 +0200 Subject: [PATCH 073/143] Numbering parts working again --- FloatingSpace/StrategyPart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 9bb28fdac..d3c8724b2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -518,7 +518,7 @@ function newStrategyPart () { } function addIndexNumber (label) { - switch (thisObject.type) { + switch (thisObject.payload.node.type) { case 'Phase': { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.phases.length; i++) { @@ -601,3 +601,4 @@ function newStrategyPart () { } } } + From cee123dcfb003a26cdfe2e483997905f894a37a1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 12:01:41 +0200 Subject: [PATCH 074/143] Updating Name works! --- FloatingSpace/StrategyPartTitle.js | 63 ++++++++++++++++++++++++++---- 1 file changed, 56 insertions(+), 7 deletions(-) diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 494a3b545..d9f96bcb9 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -7,6 +7,7 @@ function newStrategyPartTitle () { logger.fileName = MODULE_NAME let thisObject = { + editMode: undefined, container: undefined, payload: undefined, physics: physics, @@ -90,8 +91,10 @@ function newStrategyPartTitle () { } function physics () { + let title = trimTitle(thisObject.payload.title) + const FRAME_HEIGHT = 25 - const FRAME_WIDTH = thisObject.payload.title.length / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 + const FRAME_WIDTH = title.length / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2 thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO - 10 - FRAME_HEIGHT @@ -105,10 +108,53 @@ function newStrategyPartTitle () { function onNotFocus () { thisObject.isOnFocus = false + exitEditMode() } function onMouseClick (event) { + enterEditMode() + } + function exitEditMode () { + if (thisObject.editMode === true) { + thisObject.editMode = false + let input = document.getElementById('input') + input.style.display = 'none' + thisObject.payload.title = input.value + thisObject.payload.node.name = input.value + } + } + + function enterEditMode () { + const WIDTH = thisObject.container.frame.width + const HEIGHT = thisObject.container.frame.height + let fontSize = thisObject.payload.floatingObject.currentFontSize + + let inputPosition = { + x: 0, + y: 0 + window.canvasApp.topMargin + } + + inputPosition = thisObject.container.frame.frameThisPoint(inputPosition) + if (inputPosition.y < window.canvasApp.topMargin) { return } + + thisObject.editMode = true + let input = document.getElementById('input') + input.value = thisObject.payload.title + + let backgroundColor = '0, 0, 0' + if (thisObject.payload.uiObject.codeEditor !== undefined) { + if (thisObject.payload.uiObject.codeEditor.visible === true) { + backgroundColor = '204, 88, 53' + } + } + + input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + input.style.display = 'block' + input.focus() + + let inputDiv = document.getElementById('inputDiv') + inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; ' } function draw () { @@ -146,8 +192,6 @@ function newStrategyPartTitle () { let label if (radius > 6 && thisObject.isOnFocus === true) { - const MAX_LABEL_LENGTH = 25 - browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -155,9 +199,7 @@ function newStrategyPartTitle () { label = thisObject.payload.title if (label !== undefined) { - if (label.length > MAX_LABEL_LENGTH) { - label = label.substring(0, MAX_LABEL_LENGTH) + '...' - } + label = trimTitle(label) labelPoint = { x: 0, @@ -172,5 +214,12 @@ function newStrategyPartTitle () { } } } -} + function trimTitle (title) { + const MAX_LABEL_LENGTH = 25 + if (title.length > MAX_LABEL_LENGTH) { + title = title.substring(0, MAX_LABEL_LENGTH) + '...' + } + return title + } +} From 6a1bf574c670b97c18bdbbff361129c20d91961a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 12:21:41 +0200 Subject: [PATCH 075/143] BUG Exiting edit mode in title fixed --- FloatingSpace/StrategyPart.js | 4 ++++ FloatingSpace/StrategyPartTitle.js | 28 +++++++++++++++++----------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d3c8724b2..8d60c765b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -357,6 +357,10 @@ function newStrategyPart () { if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.deactivate() + } + thisObject.partTitle.exitEditMode() return thisObject.container } else { return undefined diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index d9f96bcb9..8522e9003 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -10,6 +10,8 @@ function newStrategyPartTitle () { editMode: undefined, container: undefined, payload: undefined, + enterEditMode: enterEditMode, + exitEditMode: exitEditMode, physics: physics, draw: draw, getContainer: getContainer, @@ -100,6 +102,20 @@ function newStrategyPartTitle () { thisObject.container.frame.width = FRAME_WIDTH thisObject.container.frame.height = FRAME_HEIGHT + + if (thisObject.editMode === true) { + let inputPosition = { + x: 0, + y: 0 + window.canvasApp.topMargin + } + + inputPosition = thisObject.container.frame.frameThisPoint(inputPosition) + + if (inputPosition.y < window.canvasApp.topMargin) { exitEditMode() } + + let inputDiv = document.getElementById('inputDiv') + inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; ' + } } function onFocus () { @@ -130,14 +146,6 @@ function newStrategyPartTitle () { const HEIGHT = thisObject.container.frame.height let fontSize = thisObject.payload.floatingObject.currentFontSize - let inputPosition = { - x: 0, - y: 0 + window.canvasApp.topMargin - } - - inputPosition = thisObject.container.frame.frameThisPoint(inputPosition) - if (inputPosition.y < window.canvasApp.topMargin) { return } - thisObject.editMode = true let input = document.getElementById('input') input.value = thisObject.payload.title @@ -152,9 +160,6 @@ function newStrategyPartTitle () { input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' input.style.display = 'block' input.focus() - - let inputDiv = document.getElementById('inputDiv') - inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; ' } function draw () { @@ -223,3 +228,4 @@ function newStrategyPartTitle () { return title } } + From c9ed3cb78eb719156b091a9dd27be6f504f830ae Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 12:44:36 +0200 Subject: [PATCH 076/143] code editor bug corrected, no bugs to fix now --- FloatingSpace/CodeEditor.js | 44 +++++++++++++++++++++-------------- FloatingSpace/StrategyPart.js | 4 ---- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 36a78e68e..99df8b58f 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -31,8 +31,6 @@ function newCodeEditor () { thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = 150 - thisObject.container.frame.height = 30 let isMouseOver = false @@ -75,17 +73,6 @@ function newCodeEditor () { } function activate (payload) { - const WIDTH = thisObject.container.frame.radius * 2.2 - const HEIGHT = thisObject.container.frame.radius * 1 - - let textAreaPosition = { - x: 0 - WIDTH / 2, - y: 0 - } - - textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) - if (textAreaPosition.y < window.canvasApp.topMargin) { return } - thisObject.visible = true thisObject.payload = payload thisObject.rawRadius = 8 @@ -94,12 +81,19 @@ function newCodeEditor () { let textArea = document.getElementById('textArea') textArea.value = payload.node.code - textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + textArea.style = 'resize: none;' + + ' border: none;' + + ' outline: none;' + + 'box-shadow: none;' + + 'overflow:hidden;' + + 'font-family: ' + UI_FONT.PRIMARY + ';' + + 'font-size: 12px;' + + 'background-color: rgb(204, 88, 53);' + + 'color:rgb(255, 255, 255);' + + 'width: ' + thisObject.container.frame.width + 'px;' + + 'height: ' + thisObject.container.frame.height + 'px' textArea.style.display = 'block' textArea.focus() - - let textAreaDiv = document.getElementById('textAreaDiv') - textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' } function getContainer (point) { @@ -124,6 +118,21 @@ function newCodeEditor () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 + + thisObject.container.frame.width = thisObject.container.frame.radius * 2.2 + thisObject.container.frame.height = thisObject.container.frame.radius * 1 + + let textAreaPosition = { + x: 0 - thisObject.container.frame.width / 2, + y: 0 + } + + textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) + if (textAreaPosition.y < window.canvasApp.topMargin) { deactivate() } + if (thisObject.visible === true) { + let textAreaDiv = document.getElementById('textAreaDiv') + textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' + } } function drawBackground () { @@ -186,3 +195,4 @@ function newCodeEditor () { } } } + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 8d60c765b..d3c8724b2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -357,10 +357,6 @@ function newStrategyPart () { if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { - if (thisObject.codeEditor !== undefined) { - thisObject.codeEditor.deactivate() - } - thisObject.partTitle.exitEditMode() return thisObject.container } else { return undefined From 6eb8e0a8b7665983f50e6d00a05545d47a112cd3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 15:21:35 +0200 Subject: [PATCH 077/143] Investment Plan added --- FloatingSpace/StrategyPart.js | 48 ++++-- FloatingSpace/StrategyPartConstructor.js | 4 + FloatingSpace/StrategyPartTitle.js | 33 ---- .../{Strategy.js => InvestmentPlan.js} | 150 +++++++++--------- StrategySpace/StrategyCollection.js | 2 +- StrategySpace/StrategyCollectionItem.js | 5 +- 6 files changed, 125 insertions(+), 117 deletions(-) rename StrategySpace/{Strategy.js => InvestmentPlan.js} (71%) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d3c8724b2..e86c10b21 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -68,15 +68,15 @@ function newStrategyPart () { let menuItemsInitialValues = [] switch (thisObject.payload.node.type) { - case 'Strategy': { - imagePath = 'Images/icons/style-01/quality.png' + case 'Investment Plan': { + imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ { - action: 'Reload Strategy', + action: 'Reload Investment Plan', actionFunction: thisObject.payload.onMenuItemClick, - label: 'Reload Last Saved', + label: 'Reload', visible: false, - imagePathOn: 'Images/icons/style-01/pixel.png', + imagePathOn: 'Images/icons/style-01/vector.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, @@ -84,7 +84,7 @@ function newStrategyPart () { angle: -60 }, { - action: 'Save Strategy', + action: 'Save Investment Plan', actionFunction: thisObject.payload.onMenuItemClick, label: 'Save Changes', visible: false, @@ -96,11 +96,11 @@ function newStrategyPart () { angle: -20 }, { - action: 'Delete Strategy', + action: 'New Strategy', actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Strategy', + label: 'New Strategy', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/icons/style-01/quality.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, @@ -121,6 +121,35 @@ function newStrategyPart () { }] break } + case 'Strategy': { + imagePath = 'Images/icons/style-01/quality.png' + menuItemsInitialValues = [ + { + action: 'Delete Strategy', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Delete This Strategy', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + action: 'Open Settings', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }] + break + } case 'Strategy Entry Event': { imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ @@ -601,4 +630,3 @@ function newStrategyPart () { } } } - diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 6b848c628..b07eace8a 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -42,6 +42,10 @@ function newStrategyPartConstructor () { const FRICTION = 0.97 switch (payload.node.type) { + case 'Investment Plan': { + level_1() + break + } case 'Strategy': { level_1() break diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 8522e9003..94319a052 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -44,39 +44,6 @@ function newStrategyPartTitle () { function initialize (payload) { thisObject.payload = payload - switch (payload.node.type) { - case 'Strategy': { - break - } - case 'Strategy Entry Event': { - break - } - case 'Strategy Exit Event': { - break - } - case 'Trade Entry Event': { - break - } - case 'Stop': { - break - } - case 'Take Profit': { - break - } - case 'Phase': { - break - } - case 'Situation': { - break - } - case 'Condition': { - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } - } - } - selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) diff --git a/StrategySpace/Strategy.js b/StrategySpace/InvestmentPlan.js similarity index 71% rename from StrategySpace/Strategy.js rename to StrategySpace/InvestmentPlan.js index c37ca321a..7c04c121d 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/InvestmentPlan.js @@ -1,9 +1,9 @@ -function newStrategy () { - const MODULE_NAME = 'Strategy' +function newInvestmentPlan () { + const MODULE_NAME = 'Investment Plan' let thisObject = { - strategySource: undefined, + investmentPlan: undefined, container: undefined, getContainer: getContainer, initialize: initialize, @@ -28,8 +28,10 @@ function newStrategy () { destroyStrategyParts() } - function initialize (pStrategySource) { - thisObject.strategySource = pStrategySource + function initialize (strategies) { + thisObject.investmentPlan = { + strategies: strategies + } generateStrategyParts() } @@ -78,92 +80,98 @@ function newStrategy () { function generateStrategyParts () { let lastPhase - let strategy = thisObject.strategySource - createPart('Strategy', strategy.name, strategy, undefined, undefined) + let investmentPlan = thisObject.investmentPlan - createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation') + createPart('Investment Plan', '', investmentPlan, undefined, undefined) - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition') - } - } + for (m = 0; m < investmentPlan.strategies.length; m++) { + let strategy = investmentPlan.strategies[m] + createPart('Strategy', strategy.name, strategy, investmentPlan, investmentPlan) - createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation') - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition') - } - } - - createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation') - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition') - } - } - - createPart('Stop', '', strategy.stopLoss, strategy, strategy) - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - - let chainParent - if (p === 0) { - chainParent = strategy.stopLoss - } else { - chainParent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase') - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation') + createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } - } - createPart('Take Profit', '', strategy.buyOrder, strategy, strategy) - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - let chainParent - if (p === 0) { - chainParent = strategy.buyOrder - } else { - chainParent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase') - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation') + createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } + + createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation') + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, situation, 'Condition') + } + } + + createPart('Stop', '', strategy.stopLoss, strategy, strategy) + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + + let chainParent + if (p === 0) { + chainParent = strategy.stopLoss + } else { + chainParent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase') + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, phase, 'Situation') + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, situation, 'Condition') + } + } + } + + createPart('Take Profit', '', strategy.buyOrder, strategy, strategy) + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + let chainParent + if (p === 0) { + chainParent = strategy.buyOrder + } else { + chainParent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase') + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, phase, 'Situation') + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, situation, 'Condition') + } + } + } } } function destroyStrategyParts () { - let strategy = thisObject.strategySource + let strategy = thisObject.investmentPlan destroyPart(strategy) destroyPart(strategy.entryPoint) diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index c5f9075c6..727e0d77d 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -129,7 +129,7 @@ function newStrategyCollection () { let collectionItem = newStrategyCollectionItem() collectionItem.container.connectToParent(thisObject.container, false, false) - collectionItem.initialize(strategy) + collectionItem.initialize(thisObject.strategies) collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN colletionItems.push(collectionItem) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 01b8b9f90..38dbef787 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -44,7 +44,7 @@ function newStrategyCollectionItem () { function onMouseClick (event) { if (status === 'off') { canvas.floatingSpace.makeVisible() - thisObject.strategy = newStrategy() + thisObject.strategy = newInvestmentPlan() thisObject.strategy.initialize(thisObject.strategySource) status = 'on' } else { @@ -90,7 +90,7 @@ function newStrategyCollectionItem () { labelpoint = thisObject.container.frame.frameThisPoint(labelpoint) let labelToPrint = strategy.name - labelToPrint = labelToPrint.toUpperCase() + labelToPrint = '' labelToPrint = labelToPrint.substring(0, 30) let opacity = 1 let fontSize = 15 @@ -175,3 +175,4 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } + From c8df19f24d163ecdca09b2de8d9c1395e594dc31 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 15:51:56 +0200 Subject: [PATCH 078/143] Adjusting gravity --- FloatingSpace/StrategyPartConstructor.js | 19 ++++++++--- FloatingSpace/StrategyPartTitle.js | 42 ++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index b07eace8a..cddb36254 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -43,7 +43,7 @@ function newStrategyPartConstructor () { switch (payload.node.type) { case 'Investment Plan': { - level_1() + level_0() break } case 'Strategy': { @@ -92,10 +92,21 @@ function newStrategyPartConstructor () { } } - function level_1 () { - floatingObject.friction = FRICTION + function level_0 () { + floatingObject.friction = 0.93 - floatingObject.initializeMass(100) + floatingObject.initializeMass(500) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + } + + function level_1 () { + floatingObject.friction = 0.94 + + floatingObject.initializeMass(250) floatingObject.initializeRadius(45) floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 94319a052..a13229cd6 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -7,6 +7,7 @@ function newStrategyPartTitle () { logger.fileName = MODULE_NAME let thisObject = { + allwaysVisible: undefined, editMode: undefined, container: undefined, payload: undefined, @@ -44,6 +45,43 @@ function newStrategyPartTitle () { function initialize (payload) { thisObject.payload = payload + switch (payload.node.type) { + case 'Investment Plan': { + break + } + case 'Strategy': { + thisObject.allwaysVisible = true + break + } + case 'Strategy Entry Event': { + break + } + case 'Strategy Exit Event': { + break + } + case 'Trade Entry Event': { + break + } + case 'Stop': { + break + } + case 'Take Profit': { + break + } + case 'Phase': { + break + } + case 'Situation': { + break + } + case 'Condition': { + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } + } + } + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -130,7 +168,7 @@ function newStrategyPartTitle () { } function draw () { - if (thisObject.isOnFocus === true) { + if (thisObject.isOnFocus === true || thisObject.allwaysVisible === true) { if (thisObject.payload.uiObject.codeEditor !== undefined) { if (thisObject.payload.uiObject.codeEditor.visible !== true) { drawTitleBackground() @@ -163,7 +201,7 @@ function newStrategyPartTitle () { let fontSize = thisObject.payload.floatingObject.currentFontSize let label - if (radius > 6 && thisObject.isOnFocus === true) { + if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true)) { browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY From fa4e4e0e0a26d0c2f5f7b8281cb08cfd30fd21ab Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 18:06:30 +0200 Subject: [PATCH 079/143] Can Drag Floating Space --- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPartConstructor.js | 1 + Frame.js | 88 +++++++++++++++++------- Spaces/FloatingSpace.js | 6 +- 4 files changed, 67 insertions(+), 30 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 85d610619..2a3a5e667 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -86,7 +86,7 @@ function newFloatingObject () { container = thisObject.payload.uiObject.getContainer(point) if (container !== undefined) { return container } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisScreenPointHere(point) === true) { return thisObject.container } else { return undefined diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index cddb36254..bcabcfaa2 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -33,6 +33,7 @@ function newStrategyPartConstructor () { let floatingObject = newFloatingObject() floatingObject.initialize('Strategy Part', payload) payload.floatingObject = floatingObject + floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) let strategyPart = newStrategyPart() strategyPart.initialize(payload) diff --git a/Frame.js b/Frame.js index 24eab5872..b91736738 100644 --- a/Frame.js +++ b/Frame.js @@ -1,4 +1,4 @@ -  + function newFrame () { const PANEL_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 15 // this must be grater than radius @@ -17,6 +17,7 @@ function newFrame () { frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system. unframeThisPoint: unframeThisPoint, isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. + isThisScreenPointHere: isThisScreenPointHere, isInViewPort: isInViewPort, canYouMoveHere: canYouMoveHere, initialize: initialize @@ -40,7 +41,7 @@ function newFrame () { } function isInViewPort () { - /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the viewPort */ + /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the viewPort */ point1 = { x: 0, @@ -52,7 +53,7 @@ function newFrame () { y: thisObject.height } - /* Now the transformations. */ + /* Now the transformations. */ point1 = transformThisPoint(point1, thisObject.container) point3 = transformThisPoint(point3, thisObject.container) @@ -65,7 +66,7 @@ function newFrame () { } function frameThisPoint (point) { - /* We need not to modify the point received, so me make a copy of it. */ + /* We need not to modify the point received, so me make a copy of it. */ let checkPoint = { x: point.x, @@ -96,7 +97,7 @@ function newFrame () { } function unframeThisPoint (point) { - /* We need not to modify the point received, so me make a copy of it. */ + /* We need not to modify the point received, so me make a copy of it. */ let checkPoint = { x: point.x, @@ -127,12 +128,12 @@ function newFrame () { } function canYouMoveHere (tempDisplacement) { - /* + /* - The current frame has a position and a displacement. We need to check that none of the boundaries points of the frame fall outside of its container frame. - First we apply the theoreticall displacement. + The current frame has a position and a displacement. We need to check that none of the boundaries points of the frame fall outside of its container frame. + First we apply the theoreticall displacement. - */ + */ point1 = { x: thisObject.position.x, @@ -154,24 +155,24 @@ function newFrame () { y: thisObject.position.y + thisObject.height } - /* Now the transformations. */ + /* Now the transformations. */ if (thisObject.parentFrame !== undefined) { - // If there is not a parent then there is no point to check bounderies. + // If there is not a parent then there is no point to check bounderies. point1 = thisObject.parentFrame.frameThisPoint(point1) point2 = thisObject.parentFrame.frameThisPoint(point2) point3 = thisObject.parentFrame.frameThisPoint(point3) point4 = thisObject.parentFrame.frameThisPoint(point4) - /* We apply the temporary displacement. */ + /* We apply the temporary displacement. */ point1 = tempDisplacement.displaceThisPoint(point1) point2 = tempDisplacement.displaceThisPoint(point2) point3 = tempDisplacement.displaceThisPoint(point3) point4 = tempDisplacement.displaceThisPoint(point4) - /* We add the actual displacement. */ + /* We add the actual displacement. */ point1 = thisObject.container.displacement.displaceThisPoint(point1) point2 = thisObject.container.displacement.displaceThisPoint(point2) @@ -199,17 +200,17 @@ function newFrame () { } function isThisPointHere (point, outsideViewPort, dontTransform) { - // The second parameter is usefull when you want to check a point that you already know is outside the viewport. + // The second parameter is usefull when you want to check a point that you already know is outside the viewport. - /* We need not to modify the point received, so me make a copy of it. */ + /* We need not to modify the point received, so me make a copy of it. */ let checkPoint = { x: point.x, y: point.y } - /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement - in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ + /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement + in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ if (dontTransform === false || dontTransform === undefined) { if (outsideViewPort === true) { checkPoint = thisObject.container.displacement.undisplaceThisPoint(checkPoint) @@ -219,7 +220,7 @@ function newFrame () { } } - /* Now we check if the resulting point is whin the current Frame. */ + /* Now we check if the resulting point is whin the current Frame. */ if (thisObject.type === 'Circle') { let distance = Math.sqrt(Math.pow(thisObject.position.x - point.x, 2) + Math.pow(thisObject.position.y - point.y, 2)) @@ -240,6 +241,40 @@ function newFrame () { } } + function isThisScreenPointHere (point) { + let checkPoint = { + x: point.x, + y: point.y + } + + let thisPoint = { + x: thisObject.position.x, + y: thisObject.position.y + } + + thisPoint = thisObject.parentFrame.frameThisPoint(thisPoint) + + /* Now we check if the resulting point is whin the current Frame. */ + + if (thisObject.type === 'Circle') { + let distance = Math.sqrt(Math.pow(thisPoint.x - checkPoint.x, 2) + Math.pow(thisPoint.y - checkPoint.y, 2)) + + if (distance < thisObject.radius) { + return true + } else { + return false + } + } + + if (thisObject.type === 'Rectangle') { + if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { + return false + } else { + return true + } + } + } + function draw (drawGrid, drawBorders, drawBackground) { if (drawBorders === true) { borders() @@ -276,12 +311,12 @@ function newFrame () { y: TITLE_BAR_HEIGHT } - /* Now the transformations. */ + /* Now the transformations. */ titleBarPoint1 = frameThisPoint(titleBarPoint1) titleBarPoint2 = frameThisPoint(titleBarPoint2) - /* We paint the title bar now */ + /* We paint the title bar now */ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' browserCanvasContext.beginPath() @@ -300,7 +335,7 @@ function newFrame () { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)' browserCanvasContext.stroke() - /* print the title */ + /* print the title */ let labelPoint let fontSize = 10 @@ -324,7 +359,7 @@ function newFrame () { } function borders () { - /* Lest get the important points of the drawing so as to apply the needed transformations. */ + /* Lest get the important points of the drawing so as to apply the needed transformations. */ let point1 let point2 @@ -351,14 +386,14 @@ function newFrame () { y: thisObject.height } - /* Now the transformations. */ + /* Now the transformations. */ point1 = transformThisPoint(point1, thisObject.container) point2 = transformThisPoint(point2, thisObject.container) point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) - /* Lets start the drawing. */ + /* Lets start the drawing. */ browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) @@ -377,7 +412,7 @@ function newFrame () { function grid (smallLines) { if (smallLines === true) { - /* Small Lines */ + /* Small Lines */ let step = thisObject.width / 100 @@ -424,7 +459,7 @@ function newFrame () { browserCanvasContext.stroke() } - /* Main Lines */ + /* Main Lines */ let step = thisObject.width / 20 @@ -471,3 +506,4 @@ function newFrame () { browserCanvasContext.stroke() } } + diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index f11be01dd..b5336be04 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -25,13 +25,13 @@ function newFloatingSpace () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) thisObject.container.isClickeable = false - thisObject.container.isDraggeable = false + thisObject.container.isDraggeable = true thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.position.x = SIDE_PANEL_WIDTH + thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = browserCanvas.width - SIDE_PANEL_WIDTH + thisObject.container.frame.width = browserCanvas.width thisObject.container.frame.height = browserCanvas.height let visible = false From 3ef9adadb2f73dfadf163995422e9dc99aa009e0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 18:17:01 +0200 Subject: [PATCH 080/143] Can expand the floating space size --- Spaces/FloatingSpace.js | 8 ++++---- StrategySpace/InvestmentPlan.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index b5336be04..e4d4d54fd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -29,10 +29,10 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = browserCanvas.height + thisObject.container.frame.width = browserCanvas.width * 1.5 + thisObject.container.frame.height = browserCanvas.height * 1.5 + thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 let visible = false diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index 7c04c121d..0eefe04e2 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -43,8 +43,8 @@ function newInvestmentPlan () { let payload = {} if (chainParent === undefined) { payload.targetPosition = { - x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, - y: viewPort.height / 2 + x: canvas.floatingSpace.container.frame.width / 2, + y: canvas.floatingSpace.container.frame.height / 2 } } else { payload.targetPosition = { From 032db15106bf7599b5bb3b72e31932d52c7a3428 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 23:25:52 +0200 Subject: [PATCH 081/143] Fucking BUG with targetPosition fixed --- FloatingSpace/FloatingLayer.js | 12 ++++-------- FloatingSpace/StrategyPart.js | 13 +++++++++---- FloatingSpace/StrategyPartConstructor.js | 4 ++-- Spaces/FloatingSpace.js | 8 ++++---- StrategySpace/InvestmentPlan.js | 4 ++-- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index cade6407a..db03f70b4 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -391,7 +391,7 @@ function newFloatingLayer () { /* Calculate repulsion force produced by all other floatingObjects */ - currentRepulsionForce(i) + repulsionForceBetweenFloatingObjects(i) targetRepulsionForce(i) @@ -457,7 +457,7 @@ function newFloatingLayer () { } } - function currentRepulsionForce (currentFloatingObject) { + function repulsionForceBetweenFloatingObjects (currentFloatingObject) { try { /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ @@ -515,7 +515,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err= ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] repulsionForceBetweenFloatingObjects -> err= ' + err.stack) } } } @@ -645,11 +645,7 @@ function newFloatingLayer () { } function distance (x1, y1, x2, y2) { - try { - return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } - } + return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } function resolveCollision (floatingObject1, floatingObject2) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index e86c10b21..6bfa2f17d 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -400,10 +400,13 @@ function newStrategyPart () { thisObject.codeEditor.physics() } - if (thisObject.payload.chainParent === undefined) { return } - - thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x - thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y + if (thisObject.payload.chainParent === undefined) { + thisObject.payload.targetPosition.x = canvas.floatingSpace.container.frame.width / 2, + thisObject.payload.targetPosition.y = canvas.floatingSpace.container.frame.height / 2 + } else { + thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x + thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y + } } function onFocus () { @@ -480,6 +483,7 @@ function newStrategyPart () { y: 0 } + targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint) position = thisObject.container.frame.frameThisPoint(position) if (thisObject.container.frame.radius > 1) { @@ -630,3 +634,4 @@ function newStrategyPart () { } } } + diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index bcabcfaa2..0904eb5d7 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -94,7 +94,7 @@ function newStrategyPartConstructor () { } function level_0 () { - floatingObject.friction = 0.93 + floatingObject.friction = FRICTION// 0.93 floatingObject.initializeMass(500) floatingObject.initializeRadius(45) @@ -105,7 +105,7 @@ function newStrategyPartConstructor () { } function level_1 () { - floatingObject.friction = 0.94 + floatingObject.friction = FRICTION // 0.94 floatingObject.initializeMass(250) floatingObject.initializeRadius(45) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index e4d4d54fd..13841bf2b 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -29,10 +29,10 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.width = browserCanvas.width * 1.5 - thisObject.container.frame.height = browserCanvas.height * 1.5 - thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 - thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 + thisObject.container.frame.width = browserCanvas.width * 1 + thisObject.container.frame.height = browserCanvas.height * 1 + thisObject.container.frame.position.x = 0 // browserCanvas.width / 2// - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = 0 // browserCanvas.height / 2// - thisObject.container.frame.height / 2 let visible = false diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index 0eefe04e2..c9ad1afe8 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -43,8 +43,8 @@ function newInvestmentPlan () { let payload = {} if (chainParent === undefined) { payload.targetPosition = { - x: canvas.floatingSpace.container.frame.width / 2, - y: canvas.floatingSpace.container.frame.height / 2 + x: canvas.floatingSpace.container.frame.position.x + canvas.floatingSpace.container.frame.width / 2, + y: canvas.floatingSpace.container.frame.position.y + canvas.floatingSpace.container.frame.height / 2 } } else { payload.targetPosition = { From 38f160b0eec7140502e3802eb7fa986a8ae5ffbb Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 23:56:15 +0200 Subject: [PATCH 082/143] Bounderies for floating space implemented --- FloatingSpace/FloatingLayer.js | 24 ++++++++++++++++++++++++ FloatingSpace/StrategyPartConstructor.js | 4 ++-- Spaces/FloatingSpace.js | 8 ++++---- StrategySpace/InvestmentPlan.js | 8 ++++---- 4 files changed, 34 insertions(+), 10 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index db03f70b4..f3889b6f1 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -378,6 +378,7 @@ function newFloatingLayer () { } // We let the Floating Object animate the physics loops by itself. + checkBoundaries(floatingObject) floatingObject.physics() @@ -406,6 +407,28 @@ function newFloatingLayer () { } } + function checkBoundaries (floatingObject) { + if (floatingObject.container.frame.position.x - floatingObject.container.frame.radius < 0) { + floatingObject.container.frame.position.x = floatingObject.container.frame.radius + floatingObject.currentSpeed.x = -floatingObject.currentSpeed.x + } + + if (floatingObject.container.frame.position.x + floatingObject.container.frame.radius > canvas.floatingSpace.container.frame.width) { + floatingObject.container.frame.position.x = canvas.floatingSpace.container.frame.width - floatingObject.container.frame.radius + floatingObject.currentSpeed.x = -floatingObject.currentSpeed.x + } + + if (floatingObject.container.frame.position.y - floatingObject.container.frame.radius < 0) { + floatingObject.container.frame.position.y = floatingObject.container.frame.radius + floatingObject.currentSpeed.y = -floatingObject.currentSpeed.y + } + + if (floatingObject.container.frame.position.y + floatingObject.container.frame.radius > canvas.floatingSpace.container.frame.height) { + floatingObject.container.frame.position.y = canvas.floatingSpace.container.frame.height - floatingObject.container.frame.radius + floatingObject.currentSpeed.y = -floatingObject.currentSpeed.y + } + } + function gravityForce (floatingObject, payload) { try { /* We simulate a kind of gravity towards the target point of each floatingObject. This force will make the floatingObject to keep pushing to reach that point. */ @@ -728,3 +751,4 @@ function newFloatingLayer () { } } } + diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 0904eb5d7..bcabcfaa2 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -94,7 +94,7 @@ function newStrategyPartConstructor () { } function level_0 () { - floatingObject.friction = FRICTION// 0.93 + floatingObject.friction = 0.93 floatingObject.initializeMass(500) floatingObject.initializeRadius(45) @@ -105,7 +105,7 @@ function newStrategyPartConstructor () { } function level_1 () { - floatingObject.friction = FRICTION // 0.94 + floatingObject.friction = 0.94 floatingObject.initializeMass(250) floatingObject.initializeRadius(45) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 13841bf2b..fc3f5a9c9 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -29,10 +29,10 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.width = browserCanvas.width * 1 - thisObject.container.frame.height = browserCanvas.height * 1 - thisObject.container.frame.position.x = 0 // browserCanvas.width / 2// - thisObject.container.frame.width / 2 - thisObject.container.frame.position.y = 0 // browserCanvas.height / 2// - thisObject.container.frame.height / 2 + thisObject.container.frame.width = browserCanvas.width * 3 + thisObject.container.frame.height = browserCanvas.height * 3 + thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 let visible = false diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index c9ad1afe8..34a3da0d9 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -43,13 +43,13 @@ function newInvestmentPlan () { let payload = {} if (chainParent === undefined) { payload.targetPosition = { - x: canvas.floatingSpace.container.frame.position.x + canvas.floatingSpace.container.frame.width / 2, - y: canvas.floatingSpace.container.frame.position.y + canvas.floatingSpace.container.frame.height / 2 + x: canvas.floatingSpace.container.frame.width / 2, + y: canvas.floatingSpace.container.frame.height / 2 } } else { payload.targetPosition = { - x: chainParent.payload.position.x, - y: chainParent.payload.position.y + x: chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x, + y: chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y } } From 8ddd3e8c9e6d161cccac5c289e9d6c8400a31d59 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 08:22:19 +0200 Subject: [PATCH 083/143] var to let --- Spaces/ChartSpace.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 912ccf219..ca8f8226e 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -52,7 +52,7 @@ function newChartSpace () { /* We create the first of many possible time machines that could live at the Chart Space. */ - var timeMachine = newTimeMachine() + let timeMachine = newTimeMachine() /* We make the time machine a little bit smaller than the current space. */ @@ -84,8 +84,8 @@ function newChartSpace () { function drawBackground () { if (thisObject.visible !== true) { return } - for (var i = 0; i < thisObject.timeMachines.length; i++) { - var timeMachine = thisObject.timeMachines[i] + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] timeMachine.drawBackground() } } @@ -93,8 +93,8 @@ function newChartSpace () { function draw () { if (thisObject.visible !== true) { return } - for (var i = 0; i < thisObject.timeMachines.length; i++) { - var timeMachine = thisObject.timeMachines[i] + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] timeMachine.draw() } } @@ -106,7 +106,7 @@ function newChartSpace () { /* Now we see which is the inner most container that has it */ - for (var i = 0; i < this.timeMachines.length; i++) { + for (let i = 0; i < this.timeMachines.length; i++) { container = this.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { From 769395fb729b700a363bd8f81342d0ecb030699e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 08:46:07 +0200 Subject: [PATCH 084/143] Removing list of strategies on side panel --- Spaces/StrategySpace.js | 15 +++++---- StrategySpace/StrategyCollection.js | 47 +++++------------------------ 2 files changed, 14 insertions(+), 48 deletions(-) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 18c73f82d..0b683f576 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -3,7 +3,7 @@ function newStrategySpace () { const MODULE_NAME = 'Strategy Space' let thisObject = { sidePanel: undefined, - strategyCollection: undefined, + investmentPlanWorkspace: undefined, container: undefined, draw: draw, getContainer: getContainer, @@ -22,18 +22,18 @@ function newStrategySpace () { thisObject.sidePanel = newSidePanel() thisObject.sidePanel.initialize() - thisObject.strategyCollection = newStrategyCollection() - thisObject.strategyCollection.container.connectToParent(thisObject.sidePanel.container, true, true) - await thisObject.strategyCollection.initialize() + thisObject.investmentPlanWorkspace = newInvestmentPlanWorkspace() + thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) + await thisObject.investmentPlanWorkspace.initialize() - thisObject.sidePanel.areas.push(thisObject.strategyCollection) + thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) } function getContainer (point) { let container - if (thisObject.strategyCollection !== undefined) { - container = thisObject.strategyCollection.getContainer(point) + if (thisObject.investmentPlanWorkspace !== undefined) { + container = thisObject.investmentPlanWorkspace.getContainer(point) if (container !== undefined) { return container } } @@ -49,4 +49,3 @@ function newStrategySpace () { thisObject.sidePanel.draw() } } - diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 727e0d77d..c5fb45744 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -1,6 +1,6 @@ -function newStrategyCollection () { - const MODULE_NAME = 'Strategy Collection' +function newInvestmentPlanWorkspace () { + const MODULE_NAME = 'Investment Plan Workspace' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -94,7 +94,7 @@ function newStrategyCollection () { .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - createCollectionItems() + deploydInvestmentPlan() resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { @@ -120,52 +120,19 @@ function newStrategyCollection () { } } - function createCollectionItems () { - const TOP_MARGIN = 100 - const ITEMS_SEPARATION = 90 - - for (let i = 0; i < thisObject.strategies.length; i++) { - let strategy = thisObject.strategies[i] - let collectionItem = newStrategyCollectionItem() - - collectionItem.container.connectToParent(thisObject.container, false, false) - collectionItem.initialize(thisObject.strategies) - collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN - - colletionItems.push(collectionItem) - - /* Load Strategies Icons */ - - let imageIndex = i + 1 - if (imageIndex > 14) { imageIndex = 14 } - - let strategyImage = loadEmoji('Symbols/Emoji Symbols-' + (112 + imageIndex) + '.png') - collectionItem.icon = strategyImage - } + function deploydInvestmentPlan () { + canvas.floatingSpace.makeVisible() + thisObject.strategy = newInvestmentPlan() + thisObject.strategy.initialize(thisObject.strategySource) } function getContainer (point) { let container - for (let i = 0; i < colletionItems.length; i++) { - let item = colletionItems[i] - container = item.getContainer(point) - if (container !== undefined) { - return container - } - } - return undefined } function draw () { - if (colletionItems === undefined) { - return - } - for (let i = 0; i < colletionItems.length; i++) { - let item = colletionItems[i] - item.draw() - } } } From 9e55536b7db1f86a29bb2ce8b7d9925baed50ce3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 08:58:16 +0200 Subject: [PATCH 085/143] BottomSpace improved --- Spaces/BottomSpace.js | 264 ++++++++++++++++++++++-------------------- 1 file changed, 141 insertions(+), 123 deletions(-) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index eccf98ad2..c142f757c 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -1,154 +1,172 @@ -  -function newBottomSpace () { - let thisObject = { - container: undefined, - draw: draw, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - createNewControl: createNewControl, - destroyControl: destroyControl, - getControl: getControl, - initialize: initialize - } + function newBottomSpace () { + const MODULE_NAME = 'Bottom Space' + const ERROR_LOG = true - var container = newContainer() - container.initialize() - thisObject.container = container + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + createNewControl: createNewControl, + destroyControl: destroyControl, + getControl: getControl, + finalize: finalize, + initialize: initialize + } - container.isDraggeable = false + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false - controlsMap = new Map() - resize() + controlsMap = new Map() + resize() - return thisObject + let selfMouseClickEventSubscriptionId + let canvasBroserResizedEventSubscriptionId - function initialize () { - window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) - } + return thisObject - function createNewControl (pType, pDrawFunction, pOwner) { - let control + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(canvasBroserResizedEventSubscriptionId) - switch (pType) { + thisObject.container.finalize() + thisObject.container = undefined + } - case 'Over The Line': - { - control = newUIControl() - control.initialize() - control.drawFunction = pDrawFunction - break - } - } + function initialize () { + canvasBroserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + } - let controlArray = controlsMap.get(pOwner) - if (controlArray === undefined) { - controlArray = [] - controlsMap.set(pOwner, controlArray) - } + function onMouseClick (event) { - controlArray.push(control) + } - control.handle = Math.floor((Math.random() * 10000000) + 1) + function createNewControl (pType, pDrawFunction, pOwner) { + let control - return control.handle - } + switch (pType) { - function destroyControl (pControlHandle) { - thisObject.controls = controlsMap.get('Global') - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - if (control.handle === pControlHandle) { - thisObject.controls.splice(i, 1) // Delete item from array. - return - } - } - } + case 'Over The Line': + { + control = newUIControl() + control.initialize() + control.drawFunction = pDrawFunction + break + } + } - thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - if (control.handle === pControlHandle) { - thisObject.controls.splice(i, 1) // Delete item from array. - return - } - } - } - } + let controlArray = controlsMap.get(pOwner) + if (controlArray === undefined) { + controlArray = [] + controlsMap.set(pOwner, controlArray) + } - function getControl (pControlHandle, pOwner) { - thisObject.controls = controlsMap.get(pOwner) - if (thisObject.controls != undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] + controlArray.push(control) - if (control.handle === pControlHandle) { - return control - } - } - } - } + control.handle = Math.floor((Math.random() * 10000000) + 1) - function resize () { - container.frame.position.x = 0 - container.frame.position.y = viewPort.visibleArea.bottomLeft.y + return control.handle + } - thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT - } + function destroyControl (pControlHandle) { + thisObject.controls = controlsMap.get('Global') + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + if (control.handle === pControlHandle) { + thisObject.controls.splice(i, 1) // Delete item from array. + return + } + } + } - function getContainer (point) { - let container + thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + if (control.handle === pControlHandle) { + thisObject.controls.splice(i, 1) // Delete item from array. + return + } + } + } + } - return thisObject.container - } + function getControl (pControlHandle, pOwner) { + thisObject.controls = controlsMap.get(pOwner) + if (thisObject.controls != undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] - function draw () { - thisObject.container.frame.draw(false, false) + if (control.handle === pControlHandle) { + return control + } + } + } + } - drawBackground() + function resize () { + container.frame.position.x = 0 + container.frame.position.y = viewPort.visibleArea.bottomLeft.y - thisObject.controls = controlsMap.get('Global') - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - control.draw() - } - } + thisObject.container.frame.width = browserCanvas.width + thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + } - thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) - if (thisObject.controls !== undefined) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] - control.draw() - } - } - } + function getContainer (point) { + let container - function drawBackground () { - let opacity = 1 + return thisObject.container + } - let zeroPoint = { - x: 0, - y: 0 - } + function draw () { + thisObject.container.frame.draw(false, false) - zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) + drawBackground() - let breakpointsHeight = 15 - const RED_LINE_HIGHT = 5 + thisObject.controls = controlsMap.get('Global') + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + control.draw() + } + } - browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() + thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + control.draw() + } + } + } - browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() - } -} + function drawBackground () { + let opacity = 1 + + let zeroPoint = { + x: 0, + y: 0 + } + + zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) + + let breakpointsHeight = 15 + const RED_LINE_HIGHT = 5 + + browserCanvasContext.beginPath() + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + } From 2b49bbad2c201ef07d876098080a03f8e5e231fd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:16:44 +0200 Subject: [PATCH 086/143] Can drag the bottom space --- Spaces/BottomSpace.js | 24 ++++++++++--------- ...llection.js => InvestmentPlanWorkspace.js} | 0 2 files changed, 13 insertions(+), 11 deletions(-) rename StrategySpace/{StrategyCollection.js => InvestmentPlanWorkspace.js} (100%) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index c142f757c..91fa400a4 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -16,32 +16,32 @@ thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.isClickeable = true - thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = true controlsMap = new Map() resize() let selfMouseClickEventSubscriptionId - let canvasBroserResizedEventSubscriptionId + let canvasBrowserResizedEventSubscriptionId return thisObject function finalize () { thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) - thisObject.container.eventHandler.stopListening(canvasBroserResizedEventSubscriptionId) + thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId) thisObject.container.finalize() thisObject.container = undefined } function initialize () { - canvasBroserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) + canvasBrowserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) } function onMouseClick (event) { - + // canvas.strategySpace.investmentPlanWorkspace.showUp() } function createNewControl (pType, pDrawFunction, pOwner) { @@ -109,17 +109,19 @@ } function resize () { - container.frame.position.x = 0 - container.frame.position.y = viewPort.visibleArea.bottomLeft.y + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y thisObject.container.frame.width = browserCanvas.width thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } function getContainer (point) { - let container - - return thisObject.container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } function draw () { diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/InvestmentPlanWorkspace.js similarity index 100% rename from StrategySpace/StrategyCollection.js rename to StrategySpace/InvestmentPlanWorkspace.js From 6301102a79bb4d0b02ade5eb764119d4a5155b80 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:29:04 +0200 Subject: [PATCH 087/143] Dragging on one axis is now possible --- Canvas.js | 9 +++++++-- Container.js | 2 ++ Spaces/BottomSpace.js | 22 ++++++++++++++-------- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index e137a69c8..4f7f8c567 100644 --- a/Canvas.js +++ b/Canvas.js @@ -173,6 +173,7 @@ function newCanvas () { animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) @@ -730,8 +731,12 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x - containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y + if (containerBeingDragged.notDraggingOnX === false) { + containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x + } + if (containerBeingDragged.notDraggingOnY === false) { + containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y + } } } diff --git a/Container.js b/Container.js index b6ef7eace..88c619091 100644 --- a/Container.js +++ b/Container.js @@ -8,6 +8,8 @@ function newContainer () { eventHandler: undefined, parentContainer: undefined, isDraggeable: true, + notDraggingOnX: false, + notDraggingOnY: false, isClickeable: false, isWheelable: false, detectMouseOver: false, diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 91fa400a4..3defae6e1 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -6,6 +6,7 @@ let thisObject = { container: undefined, draw: draw, + physics: physics, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. createNewControl: createNewControl, destroyControl: destroyControl, @@ -18,6 +19,7 @@ thisObject.container.initialize(MODULE_NAME) thisObject.container.isClickeable = false thisObject.container.isDraggeable = true + thisObject.container.notDraggingOnX = true controlsMap = new Map() resize() @@ -44,6 +46,18 @@ // canvas.strategySpace.investmentPlanWorkspace.showUp() } + function resize () { + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y + + thisObject.container.frame.width = browserCanvas.width + thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + } + + function physics () { + + } + function createNewControl (pType, pDrawFunction, pOwner) { let control @@ -108,14 +122,6 @@ } } - function resize () { - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y - - thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT - } - function getContainer (point) { if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container From ebe1b74165226ebb5d076d675b4c3a46db06bf5f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:53:07 +0200 Subject: [PATCH 088/143] Resizing Viewport is now possible --- Globals.js | 8 ++++---- Spaces/BottomSpace.js | 3 ++- ViewPort.js | 30 +++++++++++++++++++++++------- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/Globals.js b/Globals.js index 09dfce412..b48c52910 100644 --- a/Globals.js +++ b/Globals.js @@ -159,10 +159,10 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; -const TOP_SPACE_HEIGHT = 5; -const BOTTOM_SPACE_HEIGHT = 35; -const BREAKPOINT_HEIGHT = 15; -const SIDE_PANEL_WIDTH = 450 +let TOP_SPACE_HEIGHT = 5; +let BOTTOM_SPACE_HEIGHT = 35; +let BREAKPOINT_HEIGHT = 15; +let SIDE_PANEL_WIDTH = 450 const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 3defae6e1..f9c07db5c 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -55,7 +55,8 @@ } function physics () { - + BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y + viewPort.resize() } function createNewControl (pType, pDrawFunction, pOwner) { diff --git a/ViewPort.js b/ViewPort.js index 11b286d3c..dbfdbde98 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -10,11 +10,12 @@ function newViewPort () { const CONSOLE_LOG = true let ANIMATION_INCREMENT = 0.25 - const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT - const LEFT_MARGIN = 50 - const RIGHT_MARGIN = 50 - const MARGINS = { + + let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT + let BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + let LEFT_MARGIN = 50 + let RIGHT_MARGIN = 50 + let MARGINS = { TOP: TOP_MARGIN, BOTTOM: BOTTOM_MARGIN, LEFT: LEFT_MARGIN, @@ -44,6 +45,7 @@ function newViewPort () { animate: animate, draw: draw, raiseEvents: raiseEvents, + resize: resize, initialize: initialize } @@ -76,6 +78,22 @@ function newViewPort () { return thisObject function initialize () { + resize() + readObjectState() + } + + function resize () { + TOP_MARGIN = 15 + TOP_SPACE_HEIGHT + BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + LEFT_MARGIN = 50 + RIGHT_MARGIN = 50 + MARGINS = { + TOP: TOP_MARGIN, + BOTTOM: BOTTOM_MARGIN, + LEFT: LEFT_MARGIN, + RIGHT: RIGHT_MARGIN + } + thisObject.visibleArea = { topLeft: { x: LEFT_MARGIN, y: TOP_MARGIN }, topRight: { x: browserCanvas.width - RIGHT_MARGIN, y: TOP_MARGIN }, @@ -85,8 +103,6 @@ function newViewPort () { thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y - - readObjectState() } function getDisplacement () { From 028f97c1f325dd85de635d2fdd3078d06cbc8827 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:56:31 +0200 Subject: [PATCH 089/143] dinamic heigh --- Spaces/BottomSpace.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index f9c07db5c..b69429438 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -57,6 +57,7 @@ function physics () { BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y viewPort.resize() + thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } function createNewControl (pType, pDrawFunction, pOwner) { From c367bb498574d1a3c348775e0b19df558c535021 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 10:39:43 +0200 Subject: [PATCH 090/143] working but with BOTTOM_SPACE_HEIGHT --- Canvas.js | 4 ++-- Globals.js | 2 ++ Spaces/BottomSpace.js | 27 +++++++++++++++++++++++- Spaces/FloatingSpace.js | 4 ---- Spaces/StrategySpace.js | 14 ++++++++++++ StrategySpace/InvestmentPlanWorkspace.js | 8 ++++--- 6 files changed, 49 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index 4f7f8c567..1e9e3091a 100644 --- a/Canvas.js +++ b/Canvas.js @@ -167,6 +167,8 @@ function newCanvas () { /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) @@ -176,8 +178,6 @@ function newCanvas () { animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/Globals.js b/Globals.js index b48c52910..6b3ed9d1d 100644 --- a/Globals.js +++ b/Globals.js @@ -159,6 +159,8 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; +const BOTTOM_SPACE_MIN_HEIGHT = 35; +const BOTTOM_SPACE_MAX_HEIGHT = browserCanvas.height; let TOP_SPACE_HEIGHT = 5; let BOTTOM_SPACE_HEIGHT = 35; let BREAKPOINT_HEIGHT = 15; diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index b69429438..43664d3cd 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -48,7 +48,7 @@ function resize () { thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y + thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT thisObject.container.frame.width = browserCanvas.width thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT @@ -56,6 +56,30 @@ function physics () { BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y + + /* Check the limits */ + + if (BOTTOM_SPACE_HEIGHT < BOTTOM_SPACE_MIN_HEIGHT) { + BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MIN_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + canvas.strategySpace.makeInvisible() + } + if (BOTTOM_SPACE_HEIGHT > BOTTOM_SPACE_MAX_HEIGHT) { + BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MAX_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false + } + + if (BOTTOM_SPACE_HEIGHT > browserCanvas.height * 25 / 100) { + canvas.strategySpace.makeVisible() + } + + if (BOTTOM_SPACE_HEIGHT < browserCanvas.height * 95 / 100) { + canvas.chartSpace.visible = true + canvas.panelsSpace.visible = true + } + viewPort.resize() thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } @@ -180,3 +204,4 @@ browserCanvasContext.fill() } } + diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index fc3f5a9c9..cc2887e18 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -66,14 +66,10 @@ function newFloatingSpace () { } function makeVisible () { - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false visible = true } function makeInvisible () { - canvas.chartSpace.visible = true - canvas.panelsSpace.visible = true visible = false } diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 0b683f576..8885bd5a3 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -7,6 +7,8 @@ function newStrategySpace () { container: undefined, draw: draw, getContainer: getContainer, + makeVisible: makeVisible, + makeInvisible: makeInvisible, initialize: initialize } @@ -29,6 +31,18 @@ function newStrategySpace () { thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) } + function makeVisible () { + if (thisObject.investmentPlanWorkspace.isDeployed !== true) { + thisObject.investmentPlanWorkspace.deploydInvestmentPlan() + } + canvas.floatingSpace.makeVisible() + visible = true + } + + function makeInvisible () { + visible = false + } + function getContainer (point) { let container diff --git a/StrategySpace/InvestmentPlanWorkspace.js b/StrategySpace/InvestmentPlanWorkspace.js index c5fb45744..d2ceaa8b9 100644 --- a/StrategySpace/InvestmentPlanWorkspace.js +++ b/StrategySpace/InvestmentPlanWorkspace.js @@ -6,8 +6,10 @@ function newInvestmentPlanWorkspace () { logger.fileName = MODULE_NAME let thisObject = { + isDeployed: false, strategies: undefined, container: undefined, + deploydInvestmentPlan: deploydInvestmentPlan, draw: draw, getContainer: getContainer, initialize: initialize @@ -94,7 +96,7 @@ function newInvestmentPlanWorkspace () { .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - deploydInvestmentPlan() + resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { @@ -121,9 +123,9 @@ function newInvestmentPlanWorkspace () { } function deploydInvestmentPlan () { - canvas.floatingSpace.makeVisible() thisObject.strategy = newInvestmentPlan() - thisObject.strategy.initialize(thisObject.strategySource) + thisObject.strategy.initialize(thisObject.strategies) + thisObject.isDeployed = true } function getContainer (point) { From 6fde43db50754dd62a6cf52a4acdae36bea02ab8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 11:32:44 +0200 Subject: [PATCH 091/143] floating space apeearing --- Globals.js | 11 ++++----- Spaces/BottomSpace.js | 33 ++++++++++++++------------- Spaces/ChartSpace.js | 53 +++++++++++++++++++++++++++++++++++++++---- TimelineChart.js | 5 +++- ViewPort.js | 2 +- 5 files changed, 76 insertions(+), 28 deletions(-) diff --git a/Globals.js b/Globals.js index 6b3ed9d1d..e89a71204 100644 --- a/Globals.js +++ b/Globals.js @@ -159,12 +159,11 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; -const BOTTOM_SPACE_MIN_HEIGHT = 35; -const BOTTOM_SPACE_MAX_HEIGHT = browserCanvas.height; -let TOP_SPACE_HEIGHT = 5; -let BOTTOM_SPACE_HEIGHT = 35; -let BREAKPOINT_HEIGHT = 15; -let SIDE_PANEL_WIDTH = 450 +const TOP_SPACE_HEIGHT = 5; +const BOTTOM_SPACE_HEIGHT = 35; +const BREAKPOINT_HEIGHT = 15; +const SIDE_PANEL_WIDTH = 450 +let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 43664d3cd..519aae910 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -55,33 +55,29 @@ } function physics () { - BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y - /* Check the limits */ - if (BOTTOM_SPACE_HEIGHT < BOTTOM_SPACE_MIN_HEIGHT) { - BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MIN_HEIGHT + if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT canvas.strategySpace.makeInvisible() } - if (BOTTOM_SPACE_HEIGHT > BOTTOM_SPACE_MAX_HEIGHT) { - BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MAX_HEIGHT - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) { + thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT canvas.chartSpace.visible = false canvas.panelsSpace.visible = false } - if (BOTTOM_SPACE_HEIGHT > browserCanvas.height * 25 / 100) { + if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) { canvas.strategySpace.makeVisible() } - if (BOTTOM_SPACE_HEIGHT < browserCanvas.height * 95 / 100) { + if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) { canvas.chartSpace.visible = true canvas.panelsSpace.visible = true } + BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y viewPort.resize() - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } function createNewControl (pType, pDrawFunction, pOwner) { @@ -186,19 +182,24 @@ y: 0 } - zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) - - let breakpointsHeight = 15 const RED_LINE_HIGHT = 5 + zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) + browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index ca8f8226e..752188c91 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,4 +1,4 @@ - /* +/* The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine @@ -16,6 +16,7 @@ function newChartSpace () { let thisObject = { visible: true, container: undefined, + fitIntoVisibleArea: fitIntoVisibleArea, drawBackground: drawBackground, draw: draw, timeMachines: [], @@ -50,11 +51,11 @@ function newChartSpace () { let initializedCounter = 0 let toInitialize = 1 - /* We create the first of many possible time machines that could live at the Chart Space. */ + /* We create the first of many possible time machines that could live at the Chart Space. */ let timeMachine = newTimeMachine() - /* We make the time machine a little bit smaller than the current space. */ + /* We make the time machine a little bit smaller than the current space. */ timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 @@ -81,15 +82,58 @@ function newChartSpace () { } } + function fitIntoVisibleArea (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + if (point.x > browserCanvas.width) { + point.x = browserCanvas.width + } + + if (point.x < 0) { + point.x = 0 + } + + if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + point.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + } + + if (point.y < 0) { + point.y = 0 + } + + return point + } + function drawBackground () { if (thisObject.visible !== true) { return } + drawSpaceBackground() + for (let i = 0; i < thisObject.timeMachines.length; i++) { let timeMachine = thisObject.timeMachines[i] timeMachine.drawBackground() } } + function drawSpaceBackground () { + let opacity = '1' + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: browserCanvas.width, + y: BOTTOM_SPACE_POSITION + } + + browserCanvasContext.beginPath() + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + function draw () { if (thisObject.visible !== true) { return } @@ -104,7 +148,7 @@ function newChartSpace () { let container - /* Now we see which is the inner most container that has it */ + /* Now we see which is the inner most container that has it */ for (let i = 0; i < this.timeMachines.length; i++) { container = this.timeMachines[i].getContainer(point, purpose) @@ -117,3 +161,4 @@ function newChartSpace () { return this.container } } + diff --git a/TimelineChart.js b/TimelineChart.js index baf381f59..9cac52b13 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -299,6 +299,9 @@ fromPoint = transformThisPoint(fromPoint, thisObject.container) toPoint = transformThisPoint(toPoint, thisObject.container) + fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint) + toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint) + browserCanvasContext.beginPath() browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) @@ -338,7 +341,7 @@ let imageWidth = 150 let MAX_COLUMNS = 16 - let MAX_ROWS = 7 + let MAX_ROWS = 5 let Y_TOP_MARGIN = 30 let point1 = { diff --git a/ViewPort.js b/ViewPort.js index dbfdbde98..c34100d5e 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + BOTTOM_MARGIN = 15 + browserCanvas.height - BOTTOM_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { From 38ec00be8642fbe976d1a128c27a76d7ff87f465 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 12:38:59 +0200 Subject: [PATCH 092/143] Drag with snapping --- Canvas.js | 81 ++++++++++++++++++++++--------------------- Spaces/BottomSpace.js | 21 +++++------ Spaces/ChartSpace.js | 20 ++++++++++- TimeMachine.js | 33 +++++++++--------- 4 files changed, 86 insertions(+), 69 deletions(-) diff --git a/Canvas.js b/Canvas.js index 1e9e3091a..41d071313 100644 --- a/Canvas.js +++ b/Canvas.js @@ -171,14 +171,15 @@ function newCanvas () { animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) - animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) + animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) animation.start(onStart) function onFunctionAdded (err) { @@ -358,6 +359,21 @@ function newCanvas () { return } + /* we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) + + if (container !== undefined) { + if (container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } else { + viewPortBeingDragged = true + return + } + } + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.isDraggeable === true) { @@ -371,18 +387,6 @@ function newCanvas () { /* We dont want to mess up with the click */ return } - - /* we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - viewPortBeingDragged = true } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } @@ -439,17 +443,17 @@ function newCanvas () { return } - /* We check if the mouse is over a floatingObject/ */ - container = thisObject.floatingSpace.getContainer(point) + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) return } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) + /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -592,9 +596,10 @@ function newCanvas () { } } - /* We check if the mouse is over a floatingObject/ */ - if (thisObject.floatingSpace !== undefined) { - container = thisObject.floatingSpace.getContainer(point) + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + if (thisObject.chartSpace !== undefined) { + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -602,10 +607,9 @@ function newCanvas () { } } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - if (thisObject.chartSpace !== undefined) { - container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) + /* We check if the mouse is over a floatingObject/ */ + if (thisObject.floatingSpace !== undefined) { + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -647,15 +651,6 @@ function newCanvas () { let container container = canvas.panelsSpace.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. - } - - /* We try second with floating objects. */ - - container = canvas.floatingSpace.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. @@ -670,9 +665,17 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* Finally we try the Chart Space. */ + /* Chart Space. */ container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) + 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. + } + + /* We try second with floating objects. */ + + container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 519aae910..c69e15151 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -57,22 +57,17 @@ function physics () { /* Check the limits */ - if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) { + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT canvas.strategySpace.makeInvisible() - } - if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) { - thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false - } - - if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) { + } else { canvas.strategySpace.makeVisible() } - if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) { - canvas.chartSpace.visible = true + if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) { + thisObject.container.frame.position.y = 0 + canvas.panelsSpace.visible = false + } else { canvas.panelsSpace.visible = true } @@ -188,7 +183,7 @@ browserCanvasContext.beginPath() browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -199,7 +194,7 @@ browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 752188c91..8932c25f3 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -17,6 +17,7 @@ function newChartSpace () { visible: true, container: undefined, fitIntoVisibleArea: fitIntoVisibleArea, + physics: physics, drawBackground: drawBackground, draw: draw, timeMachines: [], @@ -104,6 +105,18 @@ function newChartSpace () { return point } + function physics () { + thisObject.container.frame.height = BOTTOM_SPACE_POSITION + + if (thisObject.container.frame.height <= 0 / 100) { + thisObject.visible = false + } else { + thisObject.visible = true + } + + viewPort.resize() + } + function drawBackground () { if (thisObject.visible !== true) { return } @@ -158,7 +171,12 @@ function newChartSpace () { } } } - return this.container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } } diff --git a/TimeMachine.js b/TimeMachine.js index 3de634771..642ed2387 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -1,4 +1,4 @@ - /* +/* Markets are a function of time. When watching them, end users must be positioned at one particular point in time. The system currently allows users to position themselves at any time they like. @@ -37,7 +37,7 @@ function newTimeMachine () { thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2 let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... - // ... also to request a reference to the object for the cases we need it. + // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 let timeScale @@ -63,7 +63,7 @@ function newTimeMachine () { function initialize (callBackFunction) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - /* Each Time Machine has a Control Panel. */ + /* Each Time Machine has a Control Panel. */ let panelOwner = 'Global' controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) @@ -76,7 +76,7 @@ function newTimeMachine () { moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) }) - /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ + /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ let position = 0 // This defines the position of each chart respect to each other. @@ -103,7 +103,7 @@ function newTimeMachine () { controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) - /* Each Time Machine has a Time Scale and a Right Scale. */ + /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) @@ -143,10 +143,10 @@ function newTimeMachine () { let market = SUPPORTED_MARKETS[j] if ( - exchange === DEFAULT_EXCHANGE && - market.assetA === DEFAULT_MARKET.assetA && - market.assetB === DEFAULT_MARKET.assetB - ) { continue } + exchange === DEFAULT_EXCHANGE && + market.assetA === DEFAULT_MARKET.assetA && + market.assetB === DEFAULT_MARKET.assetB + ) { continue } initializeTimelineChart(exchange, market) } @@ -203,7 +203,7 @@ function newTimeMachine () { if (timeScale !== undefined) { timeScale.draw() } if (rigthScale !== undefined) { rigthScale.draw() } - // thisObject.container.frame.draw(false, true, false) + // thisObject.container.frame.draw(false, true, false) } } @@ -237,7 +237,7 @@ function newTimeMachine () { } } - if (thisObject.container.frame.isThisPointHere(point) === true) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { @@ -261,10 +261,11 @@ function newTimeMachine () { } timeLineCoordinateSystem.initialize( - minValue, - maxValue, - thisObject.container.frame.width, - thisObject.container.frame.height - ) + minValue, + maxValue, + thisObject.container.frame.width, + thisObject.container.frame.height + ) } } + From 4618f145b6017b9430dd4088333794d6796e61db Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 12:47:59 +0200 Subject: [PATCH 093/143] Finished working with bottom space --- Canvas.js | 2 +- Spaces/BottomSpace.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Canvas.js b/Canvas.js index 41d071313..c7fe85f66 100644 --- a/Canvas.js +++ b/Canvas.js @@ -175,9 +175,9 @@ function newCanvas () { animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index c69e15151..707fe917f 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -188,7 +188,7 @@ browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() From c6c95d8e6bc479edffd36199cadad79ee4263f80 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 13:08:04 +0200 Subject: [PATCH 094/143] Chart Background images not showm when to little space: fixed --- Spaces/ChartSpace.js | 8 +++++--- TimelineChart.js | 10 ---------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 8932c25f3..db35893a9 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -122,9 +122,11 @@ function newChartSpace () { drawSpaceBackground() - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.drawBackground() + if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() + } } } diff --git a/TimelineChart.js b/TimelineChart.js index 9cac52b13..4733030b1 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -237,8 +237,6 @@ } function tooTiny () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] tooTiny -> Entering function.') } - if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) { return true } else { @@ -247,8 +245,6 @@ } function tooSmall () { - if (INFO_LOG === true) { logger.write('[INFO] tooSmall -> Entering function.') } - if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) { return true } else { @@ -257,8 +253,6 @@ } function drawBackground () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') } - if (thisObject.container.frame.isInViewPort()) { if (window.CHART_ON_FOCUS === '') { window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA @@ -269,8 +263,6 @@ } function draw () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } - if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() @@ -313,8 +305,6 @@ } function drawChartsBackgroundImages () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] drawChartsBackground -> Entering function.') } - if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ From ee5f43ce88512ba1c30a62a7da4f69336b2211d5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 13:30:16 +0200 Subject: [PATCH 095/143] frame supporting fitFunction --- Frame.js | 53 +++++++++++++++++++++++---- Panels/ProductsPanel.js | 2 +- Utilities/RoundedCornersBackground.js | 7 ++++ 3 files changed, 53 insertions(+), 9 deletions(-) diff --git a/Frame.js b/Frame.js index b91736738..9f169ccd3 100644 --- a/Frame.js +++ b/Frame.js @@ -275,28 +275,29 @@ function newFrame () { } } - function draw (drawGrid, drawBorders, drawBackground) { + function draw (drawGrid, drawBorders, drawBackground, fitFunction) { if (drawBorders === true) { - borders() + borders(fitFunction) } if (drawGrid === true) { - grid() + grid(fitFunction) } if (drawBackground === true) { - background() + background(fitFunction) } } - function background () { + function background (fitFunction) { let params = { cornerRadius: 5, lineWidth: 0.1, opacity: 0.75, container: thisObject.container, borderColor: UI_COLOR.DARK, - backgroundColor: UI_COLOR.WHITE + backgroundColor: UI_COLOR.WHITE, + fitFunction: fitFunction } roundedCornersBackground(params) @@ -316,6 +317,11 @@ function newFrame () { titleBarPoint1 = frameThisPoint(titleBarPoint1) titleBarPoint2 = frameThisPoint(titleBarPoint2) + if (fitFunction !== undefined) { + titleBarPoint1 = fitFunction(titleBarPoint1) + titleBarPoint2 = fitFunction(titleBarPoint2) + } + /* We paint the title bar now */ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' @@ -354,11 +360,15 @@ function newFrame () { labelPoint = thisObject.frameThisPoint(labelPoint) + if (fitFunction !== undefined) { + labelPoint = fitFunction(labelPoint) + } + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - function borders () { + function borders (fitFunction) { /* Lest get the important points of the drawing so as to apply the needed transformations. */ let point1 @@ -393,6 +403,13 @@ function newFrame () { point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) + if (fitFunction !== undefined) { + point1 = fitFunction(point1) + point2 = fitFunction(point2) + point3 = fitFunction(point3) + point4 = fitFunction(point4) + } + /* Lets start the drawing. */ browserCanvasContext.beginPath() @@ -410,7 +427,7 @@ function newFrame () { browserCanvasContext.closePath() } - function grid (smallLines) { + function grid (fitFunction, smallLines) { if (smallLines === true) { /* Small Lines */ @@ -433,6 +450,11 @@ function newFrame () { point1 = transformThisPoint(point1, thisObject.container) point2 = transformThisPoint(point2, thisObject.container) + if (fitFunction !== undefined) { + point1 = fitFunction(point1) + point2 = fitFunction(point2) + } + browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) } @@ -450,6 +472,11 @@ function newFrame () { point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) + if (fitFunction !== undefined) { + point3 = fitFunction(point3) + point4 = fitFunction(point4) + } + browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) } @@ -480,6 +507,11 @@ function newFrame () { point1 = transformThisPoint(point1, thisObject.container) point2 = transformThisPoint(point2, thisObject.container) + if (fitFunction !== undefined) { + point1 = fitFunction(point1) + point2 = fitFunction(point2) + } + browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) } @@ -497,6 +529,11 @@ function newFrame () { point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) + if (fitFunction !== undefined) { + point3 = fitFunction(point3) + point4 = fitFunction(point4) + } + browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) } diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 38887727b..115b7cefa 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -234,7 +234,7 @@ function draw () { if (isInitialized === false) { return } - thisObject.container.frame.draw(false, false, true) + thisObject.container.frame.draw(false, false, true, canvas.chartSpace.fitIntoVisibleArea) for (let i = 0; i < visibleProductCards.length; i++) { visibleProductCards[i].draw() diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index f9386eb86..3dd7bbf38 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -26,6 +26,13 @@ function roundedCornersBackground (params) { borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) + if (params.fitFunction !== undefined) { + borderPoint1 = params.fitFunction(borderPoint1) + borderPoint2 = params.fitFunction(borderPoint2) + borderPoint3 = params.fitFunction(borderPoint3) + borderPoint4 = params.fitFunction(borderPoint4) + } + browserCanvasContext.setLineDash([0, 0]) /* Shadow */ From 3790c6e1bc36cb66ff548073b9d3323dd6d76b3e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:14:22 +0200 Subject: [PATCH 096/143] Finished with Product Panels hidding below bottom bar --- Panels/PanelTabButton.js | 10 +++- ProductCard.js => Panels/ProductCard.js | 61 ++++++++++++++++++++----- Panels/ProductsPanel.js | 3 +- Spaces/ChartSpace.js | 15 ++++-- 4 files changed, 70 insertions(+), 19 deletions(-) rename ProductCard.js => Panels/ProductCard.js (94%) diff --git a/Panels/PanelTabButton.js b/Panels/PanelTabButton.js index a1d44c195..fe41ecbf6 100644 --- a/Panels/PanelTabButton.js +++ b/Panels/PanelTabButton.js @@ -1,8 +1,9 @@ function newPanelTabButton () { let thisObject = { container: undefined, - draw: draw, + fitFunction: undefined, parentContainer: undefined, + draw: draw, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize } @@ -203,6 +204,12 @@ function newPanelTabButton () { point2 = thisObject.container.frame.frameThisPoint(point2) point3 = thisObject.container.frame.frameThisPoint(point3) + if (thisObject.fitFunction !== undefined) { + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + } + /* Lets start the drawing. */ browserCanvasContext.beginPath() @@ -220,4 +227,3 @@ function newPanelTabButton () { browserCanvasContext.fill() } } - diff --git a/ProductCard.js b/Panels/ProductCard.js similarity index 94% rename from ProductCard.js rename to Panels/ProductCard.js index a6d3c5eff..f98d94155 100644 --- a/ProductCard.js +++ b/Panels/ProductCard.js @@ -16,15 +16,13 @@ function newProductCard () { bot: undefined, product: undefined, code: undefined, - + fitFunction: undefined, setDatetime: setDatetime, setTimePeriod: setTimePeriod, - onMarketFileLoaded: onMarketFileLoaded, onDailyFileLoaded: onDailyFileLoaded, onSingleFileLoaded: onSingleFileLoaded, onFileSequenceLoaded: onFileSequenceLoaded, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize } @@ -429,6 +427,11 @@ function newProductCard () { */ + let fitImagePoint = { + x: 0, + y: 0 + } + const devTeamImageSize = 20 const botImageSize = 20 const plotterImageSize = { @@ -448,6 +451,8 @@ function newProductCard () { teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint) + fitImagePoint = thisObject.fitFunction(teamImagePoint) + let teamImage if (legacyTeamAvatarLoaded === true) { @@ -458,7 +463,7 @@ function newProductCard () { teamImage = teamAvatar } - if (teamImage !== undefined) { + if (teamImage !== undefined && teamImagePoint.y === fitImagePoint.y) { if (teamImage.naturalHeight !== 0) { /* The image is rounded before being displayed. */ @@ -485,6 +490,7 @@ function newProductCard () { } botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint) + fitImagePoint = thisObject.fitFunction(botImagePoint) let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture @@ -493,7 +499,7 @@ function newProductCard () { botImage = thisObject.bot.avatar - if (botImage !== undefined) { + if (botImage !== undefined && botImagePoint.y === fitImagePoint.y) { if (botImage.naturalHeight !== 0) { /* The image is rounded before being displayed. */ @@ -522,11 +528,17 @@ function newProductCard () { } plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint) + fitImagePoint = { + x: 0, + y: plotterImagePoint.y + plotterImageSize.height + } + + fitImagePoint = thisObject.fitFunction(fitImagePoint) let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture let plotterImage = legacyPlotterBanner - if (plotterImage !== undefined) { + if (plotterImage !== undefined && plotterImagePoint.y + plotterImageSize.height === fitImagePoint.y) { if (plotterImage.naturalHeight !== 0) { browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height) } @@ -588,6 +600,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -609,7 +626,7 @@ function newProductCard () { let labelPoint let fontSize = 10 - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -625,8 +642,9 @@ function newProductCard () { } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + labelPoint = thisObject.fitFunction(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -641,8 +659,9 @@ function newProductCard () { } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + labelPoint = thisObject.fitFunction(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -664,8 +683,9 @@ function newProductCard () { } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + labelPoint = thisObject.fitFunction(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -728,6 +748,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -790,6 +815,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -852,6 +882,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -914,6 +949,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -929,4 +969,3 @@ function newProductCard () { browserCanvasContext.stroke() } } - diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 115b7cefa..eed9b2abe 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -53,6 +53,7 @@ panelTabButton = newPanelTabButton() panelTabButton.parentContainer = thisObject.container panelTabButton.container.frame.parentFrame = thisObject.container.frame + panelTabButton.fitFunction = canvas.chartSpace.fitIntoVisibleArea panelTabButton.initialize() /* Get the current teams of the logged in user. */ @@ -93,7 +94,7 @@ productCard.devTeam = devTeam productCard.bot = bot productCard.product = product - + productCard.fitFunction = canvas.chartSpace.fitIntoVisibleArea productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName /* Initialize it */ diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index db35893a9..8fce84ab3 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -86,23 +86,28 @@ function newChartSpace () { function fitIntoVisibleArea (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + let returnPoint = { + x: point.x, + y: point.y + } + if (point.x > browserCanvas.width) { - point.x = browserCanvas.width + returnPoint.x = browserCanvas.width } if (point.x < 0) { - point.x = 0 + returnPoint.x = 0 } if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - point.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 } if (point.y < 0) { - point.y = 0 + returnPoint.y = 0 } - return point + return returnPoint } function physics () { From 16fb5edd0a44c745428f96b3ce8a3d9be100767a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:37:19 +0200 Subject: [PATCH 097/143] Problem with scales not appearing fixed --- Spaces/ChartSpace.js | 50 ++++++++++++++++++++++---------------------- TimeMachine.js | 44 +++++++++++++++++++------------------- 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 8fce84ab3..5e0c6a3f7 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -58,8 +58,8 @@ function newChartSpace () { /* We make the time machine a little bit smaller than the current space. */ - timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 - timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 + timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 + timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 timeMachine.initialize(onTimeMachineInitialized) @@ -83,6 +83,29 @@ function newChartSpace () { } } + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + let container + + /* Now we see which is the inner most container that has it */ + + for (let i = 0; i < thisObject.timeMachines.length; i++) { + container = thisObject.timeMachines[i].getContainer(point, purpose) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function fitIntoVisibleArea (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ @@ -162,28 +185,5 @@ function newChartSpace () { timeMachine.draw() } } - - function getContainer (point, purpose) { - if (thisObject.visible !== true) { return } - - let container - - /* Now we see which is the inner most container that has it */ - - for (let i = 0; i < this.timeMachines.length; i++) { - container = this.timeMachines[i].getContainer(point, purpose) - if (container !== undefined) { - if (container.isForThisPurpose(purpose)) { - return container - } - } - } - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } - } } diff --git a/TimeMachine.js b/TimeMachine.js index 642ed2387..ab58e874f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -186,27 +186,6 @@ function newTimeMachine () { } } - function drawBackground () { - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.drawBackground() - } - } - - function draw () { - if (thisObject.container.frame.isInViewPort()) { - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.draw() - } - - if (timeScale !== undefined) { timeScale.draw() } - if (rigthScale !== undefined) { rigthScale.draw() } - - // thisObject.container.frame.draw(false, true, false) - } - } - function getContainer (point, purpose) { let container @@ -237,7 +216,7 @@ function newTimeMachine () { } } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point) === true) { return thisObject.container } else { if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { @@ -247,6 +226,27 @@ function newTimeMachine () { } } + function drawBackground () { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.drawBackground() + } + } + + function draw () { + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.draw() + } + + if (timeScale !== undefined) { timeScale.draw() } + if (rigthScale !== undefined) { rigthScale.draw() } + + // thisObject.container.frame.draw(false, true, false) + } + } + function recalculateScale () { if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } From 8a4849e4b11718ef2ece7cf547e4a360455de6cf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:48:34 +0200 Subject: [PATCH 098/143] zooms at the charts working again --- Canvas.js | 12 +++++++----- Spaces/ChartSpace.js | 1 + 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/Canvas.js b/Canvas.js index c7fe85f66..d69ea61a4 100644 --- a/Canvas.js +++ b/Canvas.js @@ -673,6 +673,11 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } + if (container !== undefined) { + viewPort.applyZoom(delta) + return false + } + /* We try second with floating objects. */ container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) @@ -680,12 +685,9 @@ function newCanvas () { 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. - } else { - /* If all the above fails, we fallback into applying zoom to the viewPort */ - - viewPort.applyZoom(delta) - return false // This instructs the browser not to take the event and scroll the page. } + + return false } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 5e0c6a3f7..5d2a5db81 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -30,6 +30,7 @@ function newChartSpace () { thisObject.container.initialize(MODULE_NAME) thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false return thisObject From a807340d8d2f40caa1e836c7d45bb47e396cea0d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:57:21 +0200 Subject: [PATCH 099/143] periodScale now on foreground --- TimelineChart.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/TimelineChart.js b/TimelineChart.js index 4733030b1..7ba204e95 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -265,11 +265,8 @@ function draw () { if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() - - // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) - - timePeriodScale.draw() plotterManager.draw() + timePeriodScale.draw() } } From d0b54b6e31a5caf7e0d09d97f977c5b5dec1940b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 15:04:31 +0200 Subject: [PATCH 100/143] Organizing code Files --- ChartUtilities.js => ChartsSpace/ChartUtilities.js | 0 PlottersManager.js => ChartsSpace/PlottersManager.js | 0 .../TimeLineCoordinateSystem.js | 0 TimeMachine.js => ChartsSpace/TimeMachine.js | 0 TimelineChart.js => ChartsSpace/TimelineChart.js | 0 ViewPort.js => ChartsSpace/ViewPort.js | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename ChartUtilities.js => ChartsSpace/ChartUtilities.js (100%) rename PlottersManager.js => ChartsSpace/PlottersManager.js (100%) rename TimeLineCoordinateSystem.js => ChartsSpace/TimeLineCoordinateSystem.js (100%) rename TimeMachine.js => ChartsSpace/TimeMachine.js (100%) rename TimelineChart.js => ChartsSpace/TimelineChart.js (100%) rename ViewPort.js => ChartsSpace/ViewPort.js (100%) diff --git a/ChartUtilities.js b/ChartsSpace/ChartUtilities.js similarity index 100% rename from ChartUtilities.js rename to ChartsSpace/ChartUtilities.js diff --git a/PlottersManager.js b/ChartsSpace/PlottersManager.js similarity index 100% rename from PlottersManager.js rename to ChartsSpace/PlottersManager.js diff --git a/TimeLineCoordinateSystem.js b/ChartsSpace/TimeLineCoordinateSystem.js similarity index 100% rename from TimeLineCoordinateSystem.js rename to ChartsSpace/TimeLineCoordinateSystem.js diff --git a/TimeMachine.js b/ChartsSpace/TimeMachine.js similarity index 100% rename from TimeMachine.js rename to ChartsSpace/TimeMachine.js diff --git a/TimelineChart.js b/ChartsSpace/TimelineChart.js similarity index 100% rename from TimelineChart.js rename to ChartsSpace/TimelineChart.js diff --git a/ViewPort.js b/ChartsSpace/ViewPort.js similarity index 100% rename from ViewPort.js rename to ChartsSpace/ViewPort.js From 7673864efd4b20ae46729454c5f22cb75d47da0a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 16:47:45 +0200 Subject: [PATCH 101/143] Problem with floating objects appearing anywhere solved --- FloatingSpace/FloatingObject.js | 23 ++++++++++------------- FloatingSpace/StrategyPart.js | 4 ++-- FloatingSpace/StrategyPartConstructor.js | 2 +- StrategySpace/InvestmentPlan.js | 4 ++-- 4 files changed, 15 insertions(+), 18 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 2a3a5e667..b90da54a3 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -132,14 +132,8 @@ function newFloatingObject () { /* Floating object position in screen coordinates */ - let position = { - x: 0, - y: 0 - } - - position = thisObject.container.frame.frameThisPoint(position) - - thisObject.payload.position = position + thisObject.payload.position.x = thisObject.container.frame.position.x + thisObject.payload.position.y = thisObject.container.frame.position.y } function onMouseOver (point) { @@ -255,11 +249,14 @@ function newFloatingObject () { y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y } - thisObject.container.frame.position = position - thisObject.payload.position = { - x: position.x, - y: position.y - } + // thisObject.container.frame.position = thisObject.container.frame.frameThisPoint(position) + + thisObject.container.frame.position.x = position.x + thisObject.container.frame.position.y = position.y + + thisObject.payload.position = {} + thisObject.payload.position.x = position.x + thisObject.payload.position.y = position.y } function radomizeCurrentSpeed () { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6bfa2f17d..57c02c27d 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -404,8 +404,8 @@ function newStrategyPart () { thisObject.payload.targetPosition.x = canvas.floatingSpace.container.frame.width / 2, thisObject.payload.targetPosition.y = canvas.floatingSpace.container.frame.height / 2 } else { - thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x - thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y + thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x + thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y } } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index bcabcfaa2..f3f475ef8 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -31,9 +31,9 @@ function newStrategyPartConstructor () { function createStrategyPart (payload) { let floatingObject = newFloatingObject() + floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) floatingObject.initialize('Strategy Part', payload) payload.floatingObject = floatingObject - floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) let strategyPart = newStrategyPart() strategyPart.initialize(payload) diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index 34a3da0d9..0eefe04e2 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -48,8 +48,8 @@ function newInvestmentPlan () { } } else { payload.targetPosition = { - x: chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x, - y: chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y + x: chainParent.payload.position.x, + y: chainParent.payload.position.y } } From b437581f59247f95c66167a3f35cdc7152645397 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 16:54:20 +0200 Subject: [PATCH 102/143] Mouse over floating space working again --- Spaces/ChartSpace.js | 824 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 696 insertions(+), 128 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 5d2a5db81..d69ea61a4 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,189 +1,757 @@ -/* -The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of -charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine -changes, then all charts in it are replotted with the corresponging data. +let browserCanvasContext // The context of the canvas object. -*/ +let stepsInitializationCounter = 0 // This counter the initialization steps required to be able to turn off the splash screen. +let marketInitializationCounter = 0 // This counter the initialization of markets required to be able to turn off the splash screen. +let splashScreenNeeded = true -function newChartSpace () { - const MODULE_NAME = 'Chart Space' +function newCanvas () { + const MODULE_NAME = 'Canvas' const INFO_LOG = false const ERROR_LOG = true + const INTENSIVE_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME + /* Mouse event related variables. */ + + let containerDragStarted = false + let floatingObjectDragStarted = false + let floatingObjectBeingDragged + let containerBeingDragged + let viewPortBeingDragged = false + let ignoreNextClick = false + + let dragVector = { + downX: 0, + downY: 0, + upX: 0, + upY: 0 + } + + /* canvas object */ + let thisObject = { - visible: true, - container: undefined, - fitIntoVisibleArea: fitIntoVisibleArea, - physics: physics, - drawBackground: drawBackground, - draw: draw, - timeMachines: [], - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + eventHandler: undefined, + topSpace: undefined, + chartSpace: undefined, + floatingSpace: undefined, + panelsSpace: undefined, + bottomSpace: undefined, + strategySpace: undefined, + animation: undefined, initialize: initialize, finalize: finalize } - thisObject.container = newContainer() - thisObject.container.initialize(MODULE_NAME) - - thisObject.container.isDraggeable = false - thisObject.container.isWheelable = false + thisObject.eventHandler = newEventHandler() + let splashScreen + let lastContainerMouseOver return thisObject +/* + The canvas object represents a layer on top of the browser canvas object. + + Graphically, thiscanvas object has 5 spaces: + + 1. The "Top Space": It is where Team and User information is displayed. + 2. The "Chart Space": It is where the charts are plotted. + 3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow. + 4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space. + 5. The "Bottom Space": Includes UIControls that other panels can add there. + 6. The "Strategy Spece": Functionality to manage Strategies + + All these spaces are child objects of the Canvas object. + + Canvas + | + | + ---> topSpace + | + | + ---> chartSpace + | + | + ---> flaotingSpace + | + | + ---> panelsSpace + | + | + ---> bottomSpace + | + | + ---> strategySpace +*/ + function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.finalize() + thisObject.chartSpace.finalize() + thisObject.floatingSpace.finalize() + + browserCanvas.removeEventListener('mousedown', onMouseDown, false) + browserCanvas.removeEventListener('mouseup', onMouseUp, false) + browserCanvas.removeEventListener('mousemove', onMouseMove, false) + browserCanvas.removeEventListener('click', onMouseClick, false) + + /* Mouse wheel events. */ + + if (browserCanvas.removeEventListener) { + // IE9, Chrome, Safari, Opera + browserCanvas.removeEventListener('mousewheel', onMouseWheel, false) + // Firefox + browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false) } + // IE 6/7/8 + else browserCanvas.detachEvent('onmousewheel', onMouseWheel) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } - function initialize (callBackFunction) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + async function initialize (callBackFunction) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - let initializedCounter = 0 - let toInitialize = 1 + initializeBrowserCanvas() - /* We create the first of many possible time machines that could live at the Chart Space. */ + addCanvasEvents() - let timeMachine = newTimeMachine() + /* Instantiate all the children spaces of Canvas object */ - /* We make the time machine a little bit smaller than the current space. */ + thisObject.topSpace = newTopSpace() + await thisObject.topSpace.initialize() - timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 - timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 + thisObject.strategySpace = newStrategySpace() + await thisObject.strategySpace.initialize() - timeMachine.initialize(onTimeMachineInitialized) + thisObject.bottomSpace = newBottomSpace() + thisObject.bottomSpace.initialize() - function onTimeMachineInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') } + thisObject.panelsSpace = newPanelsSpace() + thisObject.panelsSpace.initialize() - initializedCounter++ + thisObject.floatingSpace = newFloatingSpace() + thisObject.floatingSpace.initialize() - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') } + thisObject.chartSpace = newChartSpace() + thisObject.chartSpace.initialize(onCharSpaceInitialized) - callBackFunction(err) + function onCharSpaceInitialized (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } + + viewPort.raiseEvents() // These events will impacts on objects just initialized. + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + /* Splash Screen */ + + splashScreen = newSplashScreen() + splashScreen.initialize() + + let animation = newAnimation() + animation.initialize(onAnimationInitialized) + + function onAnimationInitialized (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> Entering function.') } + + thisObject.animation = animation + + /* Here we add all the functions that will be called during the animation cycle. */ + + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) + animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) + animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) + animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) + animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) + animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) + animation.start(onStart) + + function onFunctionAdded (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onFunctionAdded -> Entering function.') } + + if (err.result === GLOBAL.DEFAULT_FAIL_RESPONSE.result) { + animation.stop() + + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> Animation Stopped since a vital funtion could not be added.') } + + /* Display some Error Page here. */ + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function onStart (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Entering function.') } + + switch (err.result) { + case GLOBAL.DEFAULT_OK_RESPONSE.result: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received OK Response.') } + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + return + } + + case GLOBAL.DEFAULT_FAIL_RESPONSE.result: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received FAIL Response.') } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + return + } + + default: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received Unexpected Response.') } + callBackFunction(err) + return + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function initializeBrowserCanvas () { + try { + if (INFO_LOG === true) { logger.write('[INFO] initializeBrowserCanvas -> Entering function.') } + + browserCanvasContext = browserCanvas.getContext('2d') + // browserCanvasContext.font = 'italic small-caps bold 12px Saira' + browserCanvasContext.font = 'Saira' + + viewPort.initialize() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) } + } + } + + function addCanvasEvents () { + try { + if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') } + + /* Mouse down and up events to control the drag of the canvas. */ + + browserCanvas.addEventListener('mousedown', onMouseDown, false) + browserCanvas.addEventListener('mouseup', onMouseUp, false) + browserCanvas.addEventListener('mousemove', onMouseMove, false) + browserCanvas.addEventListener('click', onMouseClick, false) + + /* Mouse wheel events. */ + + if (browserCanvas.addEventListener) { + // IE9, Chrome, Safari, Opera + browserCanvas.addEventListener('mousewheel', onMouseWheel, false) + // Firefox + browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false) + } + // IE 6/7/8 + else browserCanvas.attachEvent('onmousewheel', onMouseWheel) + + // Disables the context menu when you right mouse click the canvas. + browserCanvas.oncontextmenu = function (e) { + e.preventDefault() + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err.stack) } + } + } + + function onMouseDown (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') } + + /* + + There are four types of elements that can be dragged. + + 1. Panels. + 2. Floating Elements (Currently only FloatingObjects). + 3. Charts. + 4. The Viewport. + + We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport. + + */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + dragVector.downX = point.x + dragVector.downY = point.y + + let container + + /* We check if the mouse is over an element of the Strategy Space / */ + + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true return } - thisObject.timeMachines.push(timeMachine) - - if (initializedCounter === toInitialize) { - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + if (container !== undefined && container.isDraggeable === false) { + return } - } - } - function getContainer (point, purpose) { - if (thisObject.visible !== true) { return } + /* We check if the mouse is over an element of the Top Space / */ - let container + container = thisObject.topSpace.getContainer(point) - /* Now we see which is the inner most container that has it */ + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } + + /* We check if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true && event.button === 2) { + containerBeingDragged = container + containerDragStarted = true + return + } + + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + + /* we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) - for (let i = 0; i < thisObject.timeMachines.length; i++) { - container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { - if (container.isForThisPurpose(purpose)) { - return container + if (container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } else { + viewPortBeingDragged = true + return } } - } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } - } + container = thisObject.floatingSpace.getContainer(point) - function fitIntoVisibleArea (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - - let returnPoint = { - x: point.x, - y: point.y - } - - if (point.x > browserCanvas.width) { - returnPoint.x = browserCanvas.width - } - - if (point.x < 0) { - returnPoint.x = 0 - } - - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 - } - - if (point.y < 0) { - returnPoint.y = 0 - } - - return returnPoint - } - - function physics () { - thisObject.container.frame.height = BOTTOM_SPACE_POSITION - - if (thisObject.container.frame.height <= 0 / 100) { - thisObject.visible = false - } else { - thisObject.visible = true - } - - viewPort.resize() - } - - function drawBackground () { - if (thisObject.visible !== true) { return } - - drawSpaceBackground() - - if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.drawBackground() + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + floatingObjectDragStarted = true + return } + + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } } - function drawSpaceBackground () { - let opacity = '1' - let fromPoint = { - x: 0, - y: 0 - } + function onMouseClick (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') } - let toPoint = { - x: browserCanvas.width, - y: BOTTOM_SPACE_POSITION - } + if (ignoreNextClick === true) { + ignoreNextClick = false + return + } + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } - browserCanvasContext.beginPath() - browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() + let container + + /* We check if the mouse is over an element of the Strategy Space / */ + + container = thisObject.strategySpace.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 Top Space / */ + + container = thisObject.topSpace.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 Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) } + } } - function draw () { - if (thisObject.visible !== true) { return } + function onMouseUp (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.draw() + if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) { + thisObject.eventHandler.raiseEvent('Drag Finished', undefined) + } + + if ( + containerDragStarted || + floatingObjectDragStarted || + viewPortBeingDragged + ) { + ignoreNextClick = true + } + /* Turn off all the possible things that can be dragged. */ + + containerDragStarted = false + floatingObjectDragStarted = false + viewPortBeingDragged = false + + containerBeingDragged = undefined + + browserCanvas.style.cursor = 'auto' + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } + } + } + + function onMouseMove (event) { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') } + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + viewPort.mousePosition.x = point.x + viewPort.mousePosition.y = point.y + + if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { + if (floatingObjectDragStarted === true) { + let targetContainer = thisObject.floatingSpace.getContainer(point) + if (targetContainer !== undefined) { + if (targetContainer.id !== containerBeingDragged.id) { + containerBeingDragged = undefined + containerDragStarted = false + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } else { + containerDragStarted = false + containerBeingDragged = undefined + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } + + dragVector.upX = point.x + dragVector.upY = point.y + + checkDrag(event) + } else { + onMouseOver(event) + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) } + } + } + + function onMouseOver (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } + + /* Then we check who is the current object underneeth the mounse. */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + let container + + /* We check if the mouse is over an element of the Strategy Space / */ + + if (thisObject.strategySpace !== undefined) { + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over an element of the Top Space / */ + + if (thisObject.topSpace !== undefined) { + container = thisObject.topSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + if (thisObject.bottomSpace !== undefined) { + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over a panel/ */ + + if (thisObject.panelsSpace !== undefined) { + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + if (thisObject.chartSpace !== undefined) { + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over a floatingObject/ */ + if (thisObject.floatingSpace !== undefined) { + container = thisObject.floatingSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + function containerFound () { + if (lastContainerMouseOver !== undefined) { + if (container.id !== lastContainerMouseOver.id) { + lastContainerMouseOver.eventHandler.raiseEvent('onMouseNotOver', point) + } + } + + container.eventHandler.raiseEvent('onMouseOver', point) + lastContainerMouseOver = container + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } + } + } + + function onMouseWheel (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') } + + // cross-browser wheel delta + var event = window.event || event // old IE support + let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)) + + /* We try first with panels. */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + event.mousePosition = point + let container + container = canvas.panelsSpace.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. + } + + /* We try the Bottom Space. */ + + container = canvas.bottomSpace.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. + } + + /* Chart Space. */ + + container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) + 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. + } + + if (container !== undefined) { + viewPort.applyZoom(delta) + return false + } + + /* We try second with floating objects. */ + + container = canvas.floatingSpace.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. + } + + return false + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } + } + } + + function checkDrag (event) { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') } + + if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + browserCanvas.style.cursor = 'grabbing' + thisObject.eventHandler.raiseEvent('Dragging', undefined) + + if (containerDragStarted || viewPortBeingDragged) { + /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ + + let downCopy = { + x: dragVector.downX, + y: dragVector.downY + } + + let downCopyNoTransf + downCopyNoTransf = viewPort.unzoomThisPoint(downCopy) + // downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf); + + let upCopy = { + x: dragVector.upX, + y: dragVector.upY + } + + let upCopyNoTranf + upCopyNoTranf = viewPort.unzoomThisPoint(upCopy) + + let displaceVector = { + x: dragVector.upX - dragVector.downX, + y: dragVector.upY - dragVector.downY + } + + if (viewPortBeingDragged) { + viewPort.displace(displaceVector) + } + + if (containerBeingDragged !== undefined) { + if (containerBeingDragged.notDraggingOnX === false) { + containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x + } + if (containerBeingDragged.notDraggingOnY === false) { + containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y + } + } + } + + /* Finally we set the starting point of the new dragVector at this current point. */ + + dragVector.downX = dragVector.upX + dragVector.downY = dragVector.upY + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) } } } } From 362664460cdaa328451e9a29be7f09868f1ee490 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 18:35:15 +0200 Subject: [PATCH 103/143] restoring the original code --- Spaces/ChartSpace.js | 816 +++++++------------------------------------ 1 file changed, 124 insertions(+), 692 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index d69ea61a4..5d2a5db81 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,757 +1,189 @@ +/* -let browserCanvasContext // The context of the canvas object. +The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of +charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine +changes, then all charts in it are replotted with the corresponging data. -let stepsInitializationCounter = 0 // This counter the initialization steps required to be able to turn off the splash screen. -let marketInitializationCounter = 0 // This counter the initialization of markets required to be able to turn off the splash screen. -let splashScreenNeeded = true +*/ -function newCanvas () { - const MODULE_NAME = 'Canvas' +function newChartSpace () { + const MODULE_NAME = 'Chart Space' const INFO_LOG = false const ERROR_LOG = true - const INTENSIVE_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME - /* Mouse event related variables. */ - - let containerDragStarted = false - let floatingObjectDragStarted = false - let floatingObjectBeingDragged - let containerBeingDragged - let viewPortBeingDragged = false - let ignoreNextClick = false - - let dragVector = { - downX: 0, - downY: 0, - upX: 0, - upY: 0 - } - - /* canvas object */ - let thisObject = { - eventHandler: undefined, - topSpace: undefined, - chartSpace: undefined, - floatingSpace: undefined, - panelsSpace: undefined, - bottomSpace: undefined, - strategySpace: undefined, - animation: undefined, + visible: true, + container: undefined, + fitIntoVisibleArea: fitIntoVisibleArea, + physics: physics, + drawBackground: drawBackground, + draw: draw, + timeMachines: [], + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize, finalize: finalize } - thisObject.eventHandler = newEventHandler() + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false - let splashScreen - let lastContainerMouseOver return thisObject -/* - The canvas object represents a layer on top of the browser canvas object. - - Graphically, thiscanvas object has 5 spaces: - - 1. The "Top Space": It is where Team and User information is displayed. - 2. The "Chart Space": It is where the charts are plotted. - 3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow. - 4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space. - 5. The "Bottom Space": Includes UIControls that other panels can add there. - 6. The "Strategy Spece": Functionality to manage Strategies - - All these spaces are child objects of the Canvas object. - - Canvas - | - | - ---> topSpace - | - | - ---> chartSpace - | - | - ---> flaotingSpace - | - | - ---> panelsSpace - | - | - ---> bottomSpace - | - | - ---> strategySpace -*/ - function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - thisObject.chartSpace.finalize() - thisObject.floatingSpace.finalize() - - browserCanvas.removeEventListener('mousedown', onMouseDown, false) - browserCanvas.removeEventListener('mouseup', onMouseUp, false) - browserCanvas.removeEventListener('mousemove', onMouseMove, false) - browserCanvas.removeEventListener('click', onMouseClick, false) - - /* Mouse wheel events. */ - - if (browserCanvas.removeEventListener) { - // IE9, Chrome, Safari, Opera - browserCanvas.removeEventListener('mousewheel', onMouseWheel, false) - // Firefox - browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false) + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.finalize() } - // IE 6/7/8 - else browserCanvas.detachEvent('onmousewheel', onMouseWheel) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } - async function initialize (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function initialize (callBackFunction) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - initializeBrowserCanvas() + let initializedCounter = 0 + let toInitialize = 1 - addCanvasEvents() + /* We create the first of many possible time machines that could live at the Chart Space. */ - /* Instantiate all the children spaces of Canvas object */ + let timeMachine = newTimeMachine() - thisObject.topSpace = newTopSpace() - await thisObject.topSpace.initialize() + /* We make the time machine a little bit smaller than the current space. */ - thisObject.strategySpace = newStrategySpace() - await thisObject.strategySpace.initialize() + timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 + timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 - thisObject.bottomSpace = newBottomSpace() - thisObject.bottomSpace.initialize() + timeMachine.initialize(onTimeMachineInitialized) - thisObject.panelsSpace = newPanelsSpace() - thisObject.panelsSpace.initialize() + function onTimeMachineInitialized (err) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') } - thisObject.floatingSpace = newFloatingSpace() - thisObject.floatingSpace.initialize() + initializedCounter++ - thisObject.chartSpace = newChartSpace() - thisObject.chartSpace.initialize(onCharSpaceInitialized) + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') } - function onCharSpaceInitialized (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } - - viewPort.raiseEvents() // These events will impacts on objects just initialized. - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + callBackFunction(err) + return } - /* Splash Screen */ + thisObject.timeMachines.push(timeMachine) - splashScreen = newSplashScreen() - splashScreen.initialize() - - let animation = newAnimation() - animation.initialize(onAnimationInitialized) - - function onAnimationInitialized (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> Entering function.') } - - thisObject.animation = animation - - /* Here we add all the functions that will be called during the animation cycle. */ - - animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) - animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) - animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) - animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) - animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) - animation.start(onStart) - - function onFunctionAdded (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onFunctionAdded -> Entering function.') } - - if (err.result === GLOBAL.DEFAULT_FAIL_RESPONSE.result) { - animation.stop() - - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> Animation Stopped since a vital funtion could not be added.') } - - /* Display some Error Page here. */ - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } - - function onStart (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Entering function.') } - - switch (err.result) { - case GLOBAL.DEFAULT_OK_RESPONSE.result: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received OK Response.') } - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) - return - } - - case GLOBAL.DEFAULT_FAIL_RESPONSE.result: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received FAIL Response.') } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - return - } - - default: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received Unexpected Response.') } - callBackFunction(err) - return - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + if (initializedCounter === toInitialize) { + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } - function initializeBrowserCanvas () { - try { - if (INFO_LOG === true) { logger.write('[INFO] initializeBrowserCanvas -> Entering function.') } + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } - browserCanvasContext = browserCanvas.getContext('2d') - // browserCanvasContext.font = 'italic small-caps bold 12px Saira' - browserCanvasContext.font = 'Saira' + let container - viewPort.initialize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) } - } - } - - function addCanvasEvents () { - try { - if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') } - - /* Mouse down and up events to control the drag of the canvas. */ - - browserCanvas.addEventListener('mousedown', onMouseDown, false) - browserCanvas.addEventListener('mouseup', onMouseUp, false) - browserCanvas.addEventListener('mousemove', onMouseMove, false) - browserCanvas.addEventListener('click', onMouseClick, false) - - /* Mouse wheel events. */ - - if (browserCanvas.addEventListener) { - // IE9, Chrome, Safari, Opera - browserCanvas.addEventListener('mousewheel', onMouseWheel, false) - // Firefox - browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false) - } - // IE 6/7/8 - else browserCanvas.attachEvent('onmousewheel', onMouseWheel) - - // Disables the context menu when you right mouse click the canvas. - browserCanvas.oncontextmenu = function (e) { - e.preventDefault() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err.stack) } - } - } - - function onMouseDown (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') } - - /* - - There are four types of elements that can be dragged. - - 1. Panels. - 2. Floating Elements (Currently only FloatingObjects). - 3. Charts. - 4. The Viewport. - - We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport. - - */ - - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - dragVector.downX = point.x - dragVector.downY = point.y - - let container - - /* We check if the mouse is over an element of the Strategy Space / */ - - container = thisObject.strategySpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - if (container !== undefined && container.isDraggeable === false) { - return - } - - /* We check if the mouse is over an element of the Top Space / */ - - container = thisObject.topSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - /* We check if the mouse is over an element of the Bottom Space / */ - - container = thisObject.bottomSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - /* We check if the mouse is over a panel/ */ - - container = thisObject.panelsSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true && event.button === 2) { - containerBeingDragged = container - containerDragStarted = true - return - } - - if (container !== undefined && container.isClickeable === true) { - /* We dont want to mess up with the click */ - return - } - - /* we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) + /* Now we see which is the inner most container that has it */ + for (let i = 0; i < thisObject.timeMachines.length; i++) { + container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { - if (container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } else { - viewPortBeingDragged = true - return + if (container.isForThisPurpose(purpose)) { + return container } } + } - container = thisObject.floatingSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - floatingObjectDragStarted = true - return - } - - if (container !== undefined && container.isClickeable === true) { - /* We dont want to mess up with the click */ - return - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined } } - function onMouseClick (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') } + function fitIntoVisibleArea (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - if (ignoreNextClick === true) { - ignoreNextClick = false - return + let returnPoint = { + x: point.x, + y: point.y + } + + if (point.x > browserCanvas.width) { + returnPoint.x = browserCanvas.width + } + + if (point.x < 0) { + returnPoint.x = 0 + } + + if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + } + + if (point.y < 0) { + returnPoint.y = 0 + } + + return returnPoint + } + + function physics () { + thisObject.container.frame.height = BOTTOM_SPACE_POSITION + + if (thisObject.container.frame.height <= 0 / 100) { + thisObject.visible = false + } else { + thisObject.visible = true + } + + viewPort.resize() + } + + function drawBackground () { + if (thisObject.visible !== true) { return } + + drawSpaceBackground() + + if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() } - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - let container - - /* We check if the mouse is over an element of the Strategy Space / */ - - container = thisObject.strategySpace.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 Top Space / */ - - container = thisObject.topSpace.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 Bottom Space / */ - - container = thisObject.bottomSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - - /* We check if the mouse is over a panel/ */ - - container = thisObject.panelsSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - - /* We check if the mouse is over a floatingObject/ */ - container = thisObject.floatingSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) } } } - function onMouseUp (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') } - - if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) { - thisObject.eventHandler.raiseEvent('Drag Finished', undefined) - } - - if ( - containerDragStarted || - floatingObjectDragStarted || - viewPortBeingDragged - ) { - ignoreNextClick = true - } - /* Turn off all the possible things that can be dragged. */ - - containerDragStarted = false - floatingObjectDragStarted = false - viewPortBeingDragged = false - - containerBeingDragged = undefined - - browserCanvas.style.cursor = 'auto' - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } + function drawSpaceBackground () { + let opacity = '1' + let fromPoint = { + x: 0, + y: 0 } + + let toPoint = { + x: browserCanvas.width, + y: BOTTOM_SPACE_POSITION + } + + browserCanvasContext.beginPath() + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() } - function onMouseMove (event) { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') } + function draw () { + if (thisObject.visible !== true) { return } - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - viewPort.mousePosition.x = point.x - viewPort.mousePosition.y = point.y - - if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { - if (floatingObjectDragStarted === true) { - let targetContainer = thisObject.floatingSpace.getContainer(point) - if (targetContainer !== undefined) { - if (targetContainer.id !== containerBeingDragged.id) { - containerBeingDragged = undefined - containerDragStarted = false - floatingObjectDragStarted = false - browserCanvas.style.cursor = 'auto' - ignoreNextClick = true - return - } - } else { - containerDragStarted = false - containerBeingDragged = undefined - floatingObjectDragStarted = false - browserCanvas.style.cursor = 'auto' - ignoreNextClick = true - return - } - } - - dragVector.upX = point.x - dragVector.upY = point.y - - checkDrag(event) - } else { - onMouseOver(event) - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) } - } - } - - function onMouseOver (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } - - /* Then we check who is the current object underneeth the mounse. */ - - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - let container - - /* We check if the mouse is over an element of the Strategy Space / */ - - if (thisObject.strategySpace !== undefined) { - container = thisObject.strategySpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over an element of the Top Space / */ - - if (thisObject.topSpace !== undefined) { - container = thisObject.topSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over an element of the Bottom Space / */ - - if (thisObject.bottomSpace !== undefined) { - container = thisObject.bottomSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over a panel/ */ - - if (thisObject.panelsSpace !== undefined) { - container = thisObject.panelsSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - if (thisObject.chartSpace !== undefined) { - container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over a floatingObject/ */ - if (thisObject.floatingSpace !== undefined) { - container = thisObject.floatingSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - function containerFound () { - if (lastContainerMouseOver !== undefined) { - if (container.id !== lastContainerMouseOver.id) { - lastContainerMouseOver.eventHandler.raiseEvent('onMouseNotOver', point) - } - } - - container.eventHandler.raiseEvent('onMouseOver', point) - lastContainerMouseOver = container - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } - } - } - - function onMouseWheel (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') } - - // cross-browser wheel delta - var event = window.event || event // old IE support - let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)) - - /* We try first with panels. */ - - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - event.mousePosition = point - let container - container = canvas.panelsSpace.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. - } - - /* We try the Bottom Space. */ - - container = canvas.bottomSpace.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. - } - - /* Chart Space. */ - - container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) - 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. - } - - if (container !== undefined) { - viewPort.applyZoom(delta) - return false - } - - /* We try second with floating objects. */ - - container = canvas.floatingSpace.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. - } - - return false - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } - } - } - - function checkDrag (event) { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') } - - if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - browserCanvas.style.cursor = 'grabbing' - thisObject.eventHandler.raiseEvent('Dragging', undefined) - - if (containerDragStarted || viewPortBeingDragged) { - /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ - - let downCopy = { - x: dragVector.downX, - y: dragVector.downY - } - - let downCopyNoTransf - downCopyNoTransf = viewPort.unzoomThisPoint(downCopy) - // downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf); - - let upCopy = { - x: dragVector.upX, - y: dragVector.upY - } - - let upCopyNoTranf - upCopyNoTranf = viewPort.unzoomThisPoint(upCopy) - - let displaceVector = { - x: dragVector.upX - dragVector.downX, - y: dragVector.upY - dragVector.downY - } - - if (viewPortBeingDragged) { - viewPort.displace(displaceVector) - } - - if (containerBeingDragged !== undefined) { - if (containerBeingDragged.notDraggingOnX === false) { - containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x - } - if (containerBeingDragged.notDraggingOnY === false) { - containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y - } - } - } - - /* Finally we set the starting point of the new dragVector at this current point. */ - - dragVector.downX = dragVector.upX - dragVector.downY = dragVector.upY - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) } + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.draw() } } } From 329556322bd74cff72c2b673b885d4d53ac64b09 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 19:12:05 +0200 Subject: [PATCH 104/143] Restoring a function that was deleted by mistake --- Frame.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/Frame.js b/Frame.js index 9f169ccd3..567f77c2b 100644 --- a/Frame.js +++ b/Frame.js @@ -7,13 +7,14 @@ function newFrame () { type: 'Rectangle', containerName: '', // This is for debugging purposes only. parentFrame: undefined, // Here we store the parent cointainer zoom object. - width: browserCanvas.width, - height: browserCanvas.height, radius: 0, position: undefined, + container: undefined, + width: browserCanvas.width, + height: browserCanvas.height, getBodyHeight: getBodyHeight, draw: draw, - container: undefined, + fitIntoFrame: fitIntoFrame, frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system. unframeThisPoint: unframeThisPoint, isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. @@ -127,6 +128,28 @@ function newFrame () { return returnPoint } + function fitIntoFrame (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + if (point.x > thisObject.width) { + point.x = thisObject.width + } + + if (point.x < 0) { + point.x = 0 + } + + if (point.y > thisObject.height) { + point.y = thisObject.height + } + + if (point.y < 0) { + point.y = 0 + } + + return point + } + function canYouMoveHere (tempDisplacement) { /* @@ -543,4 +566,3 @@ function newFrame () { browserCanvasContext.stroke() } } - From 189a5babe981d1c174249903ac05e4a922300f04 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 19:38:18 +0200 Subject: [PATCH 105/143] Fix to Mouse Over --- ChartsSpace/TimeMachine.js | 4 +++- Spaces/ChartSpace.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index ab58e874f..435636caa 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -211,7 +211,9 @@ function newTimeMachine () { container = this.charts[i].getContainer(point) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { - return container + if (thisObject.container.frame.isThisPointHere(point) === true) { + return container + } } } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 5d2a5db81..3533d5dd8 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -95,7 +95,9 @@ function newChartSpace () { container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { - return container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return container + } } } } From 2f4404b513bad57fe55f8df9b6d233fb3fa1740c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 20:59:33 +0200 Subject: [PATCH 106/143] fitFunction applied to Products Panel --- Panels/ProductsPanel.js | 363 +++++++++++++++++++++------------------- Spaces/PanelsSpace.js | 1 + 2 files changed, 190 insertions(+), 174 deletions(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index eed9b2abe..222ae19e1 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -1,246 +1,261 @@ - function newProductsPanel () { - let thisObject = { - container: undefined, - getLoadingProductCards: getLoadingProductCards, - draw: draw, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - } +function newProductsPanel () { + let thisObject = { + container: undefined, + getLoadingProductCards: getLoadingProductCards, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + } - /* Cointainer stuff */ + /* Cointainer stuff */ - var container = newContainer() + var container = newContainer() - container.initialize() + container.initialize() - container.isDraggeable = true - container.isWheelable = true + container.isDraggeable = true + container.isWheelable = true - thisObject.container = container + thisObject.container = container - let isInitialized = false - let productCards = [] + let isInitialized = false + let productCards = [] - let visibleProductCards = [] - let firstVisibleCard = 1 + let visibleProductCards = [] + let firstVisibleCard = 1 - /* Needed Variables */ + /* Needed Variables */ - let lastY = 5 - let panelTabButton + let lastY = 5 + let panelTabButton - let exchange - let market + let exchange + let market - return thisObject + return thisObject - function initialize (pExchange, pMarket) { - exchange = pExchange - market = pMarket + function initialize (pExchange, pMarket) { + exchange = pExchange + market = pMarket - thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA - thisObject.container.frame.containerName = thisObject.container.name - thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE - thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; + thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA + thisObject.container.frame.containerName = thisObject.container.name + thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE + thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; - var position = { - x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height - } + thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea - thisObject.container.frame.position = position + var position = { + x: viewPort.visibleArea.topLeft.x, + y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height + } - panelTabButton = newPanelTabButton() - panelTabButton.parentContainer = thisObject.container - panelTabButton.container.frame.parentFrame = thisObject.container.frame - panelTabButton.fitFunction = canvas.chartSpace.fitIntoVisibleArea - panelTabButton.initialize() + thisObject.container.frame.position = position - /* Get the current teams of the logged in user. */ + panelTabButton = newPanelTabButton() + panelTabButton.parentContainer = thisObject.container + panelTabButton.container.frame.parentFrame = thisObject.container.frame + panelTabButton.fitFunction = thisObject.fitFunction + panelTabButton.initialize() - let storedTeams = window.localStorage.getItem('userTeams') - let userTeams - let userTeam = {slug: ''} - if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') { - userTeams = JSON.parse(storedTeams) - userTeam = userTeams[0] // Currently we assume a user can be at only one team. - } - if (userTeam === undefined) { userTeam = {slug: ''} } + /* Get the current teams of the logged in user. */ - /* First thing is to build the productCards array */ + let storedTeams = window.localStorage.getItem('userTeams') + let userTeams + let userTeam = {slug: ''} + if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') { + userTeams = JSON.parse(storedTeams) + userTeam = userTeams[0] // Currently we assume a user can be at only one team. + } + if (userTeam === undefined) { userTeam = {slug: ''} } - let devTeams = ecosystem.getTeams() + /* First thing is to build the productCards array */ - for (let i = 0; i < devTeams.length; i++) { - let devTeam = devTeams[i] + let devTeams = ecosystem.getTeams() - for (let j = 0; j < devTeam.bots.length; j++) { - let bot = devTeam.bots[j] + for (let i = 0; i < devTeams.length; i++) { + let devTeam = devTeams[i] - if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } - if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue } + for (let j = 0; j < devTeam.bots.length; j++) { + let bot = devTeam.bots[j] - if (bot.products !== undefined) { - for (let k = 0; k < bot.products.length; k++) { - let product = bot.products[k] + if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } + if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue } - if (window.localStorage.getItem('Show AAMaster Layers') === null) { - if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } - } - /* Now we create Product objects */ + if (bot.products !== undefined) { + for (let k = 0; k < bot.products.length; k++) { + let product = bot.products[k] - let productCard = newProductCard() + if (window.localStorage.getItem('Show AAMaster Layers') === null) { + if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } + } + /* Now we create Product objects */ - productCard.devTeam = devTeam - productCard.bot = bot - productCard.product = product - productCard.fitFunction = canvas.chartSpace.fitIntoVisibleArea - productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName + let productCard = newProductCard() - /* Initialize it */ + productCard.devTeam = devTeam + productCard.bot = bot + productCard.product = product + productCard.fitFunction = thisObject.fitFunction + productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName - productCard.initialize() + /* Initialize it */ - /* Container Stuff */ + productCard.initialize() - productCard.container.displacement.parentDisplacement = thisObject.container.displacement - productCard.container.frame.parentFrame = thisObject.container.frame - productCard.container.parentContainer = thisObject.container - productCard.container.isWheelable = true + /* Container Stuff */ - /* Positioning within thisObject Panel */ + productCard.container.displacement.parentDisplacement = thisObject.container.displacement + productCard.container.frame.parentFrame = thisObject.container.frame + productCard.container.parentContainer = thisObject.container + productCard.container.isWheelable = true - let position = { - x: 10, - y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() - } + /* Positioning within thisObject Panel */ - productCard.container.frame.position.x = position.x - productCard.container.frame.position.y = position.y + lastY + let position = { + x: 10, + y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() + } - lastY = lastY + productCard.container.frame.height + productCard.container.frame.position.x = position.x + productCard.container.frame.position.y = position.y + lastY - /* Add to the Product Array */ + lastY = lastY + productCard.container.frame.height - productCards.push(productCard) + /* Add to the Product Array */ - /* Add to Visible Product Array */ + productCards.push(productCard) - if (productCard.container.frame.position.y + productCard.container.frame.height < thisObject.container.frame.height) { - visibleProductCards.push(productCard) - } + /* Add to Visible Product Array */ - /* Listen to Status Changes Events */ + if (productCard.container.frame.position.y + productCard.container.frame.height < thisObject.container.frame.height) { + visibleProductCards.push(productCard) + } - productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged) - productCard.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) - } - } - } - } + /* Listen to Status Changes Events */ - thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) - isInitialized = true - } + productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged) + productCard.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + } + } + } + } - function onMouseWheel (event) { - delta = event.wheelDelta - if (delta > 0) { - delta = -1 - } else { - delta = 1 - } + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + isInitialized = true + } - firstVisibleCard = firstVisibleCard + delta + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta > 0) { + delta = -1 + } else { + delta = 1 + } - let availableSlots = visibleProductCards.length + firstVisibleCard = firstVisibleCard + delta - if (firstVisibleCard < 1) { firstVisibleCard = 1 } - if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 } + let availableSlots = visibleProductCards.length - visibleProductCards = [] - var lastY = 5 + if (firstVisibleCard < 1) { firstVisibleCard = 1 } + if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 } - for (let i = 0; i < productCards.length; i++) { - if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) { - let productCard = productCards[i] + visibleProductCards = [] + var lastY = 5 - /* Positioning within thisObject Panel */ + for (let i = 0; i < productCards.length; i++) { + if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) { + let productCard = productCards[i] - let position = { - x: 10, - y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() - } - productCard.container.frame.position.x = position.x - productCard.container.frame.position.y = position.y + lastY + /* Positioning within thisObject Panel */ - lastY = lastY + productCard.container.frame.height + let position = { + x: 10, + y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() + } + productCard.container.frame.position.x = position.x + productCard.container.frame.position.y = position.y + lastY - /* Add to Visible Product Array */ + lastY = lastY + productCard.container.frame.height - visibleProductCards.push(productCard) - } - } - } + /* Add to Visible Product Array */ - function onProductCardStatusChanged (pProductCard) { - thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', pProductCard) - } + visibleProductCards.push(productCard) + } + } + } - function getLoadingProductCards () { - /* Returns all productCards which status is LOADING */ + function onProductCardStatusChanged (pProductCard) { + thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', pProductCard) + } - let onProducts = [] + function getLoadingProductCards () { + /* Returns all productCards which status is LOADING */ - for (let i = 0; i < productCards.length; i++) { - if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) { - onProducts.push(productCards[i]) - } - } + let onProducts = [] - return onProducts - } + for (let i = 0; i < productCards.length; i++) { + if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) { + onProducts.push(productCards[i]) + } + } - function getContainer (point) { - var container + return onProducts + } - container = panelTabButton.getContainer(point) - if (container !== undefined) { return container } + function getContainer (point) { + var container - /* First we check if thisObject point is inside thisObject space. */ + container = panelTabButton.getContainer(point) + if (container !== undefined) { return container } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - /* Now we see which is the inner most container that has it */ + /* First we check if thisObject point is inside thisObject space. */ - for (var i = 0; i < visibleProductCards.length; i++) { - container = visibleProductCards[i].getContainer(point) + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + /* Now we see which is the inner most container that has it */ - if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ + for (var i = 0; i < visibleProductCards.length; i++) { + container = visibleProductCards[i].getContainer(point) - return container - } - } + if (container !== undefined) { + let checkPoint = { + x: point.x, + y: point.y + } - /* The point does not belong to any inner container, so we return the current container. */ + checkPoint = thisObject.fitFunction(checkPoint) - return thisObject.container - } else { - /* This point does not belong to thisObject space. */ + if (point.x === checkPoint.x && point.y === checkPoint.y) { + return container + } + } + } - return undefined - } - } + /* The point does not belong to any inner container, so we return the current container. */ - function draw () { - if (isInitialized === false) { return } + let checkPoint = { + x: point.x, + y: point.y + } - thisObject.container.frame.draw(false, false, true, canvas.chartSpace.fitIntoVisibleArea) + checkPoint = thisObject.fitFunction(checkPoint) - for (let i = 0; i < visibleProductCards.length; i++) { - visibleProductCards[i].draw() - } + if (point.x === checkPoint.x && point.y === checkPoint.y) { + return thisObject.container + } + } + } + + function draw () { + if (isInitialized === false) { return } + + thisObject.container.frame.draw(false, false, true, thisObject.fitFunction) + + for (let i = 0; i < visibleProductCards.length; i++) { + visibleProductCards[i].draw() + } + + panelTabButton.draw() + } +} - panelTabButton.draw() - } - } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 74b00c25e..6d3265132 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -54,6 +54,7 @@ function newPanelsSpace () { case 'Plotter Panel': { panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName) + panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea panel.initialize() break } From 5075a70c85d77b6aa633c89f15b19e85f90d3279 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 21:24:58 +0200 Subject: [PATCH 107/143] background images with fit function --- ChartsSpace/TimelineChart.js | 825 ++++++++++++++++++----------------- Spaces/ChartSpace.js | 8 +- 2 files changed, 434 insertions(+), 399 deletions(-) diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index 7ba204e95..f9d1aad60 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -1,474 +1,511 @@ - function newTimelineChart () { - const MODULE_NAME = 'Timeline Chart' - const INFO_LOG = false - const INTENSIVE_LOG = false - const ERROR_LOG = true - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME - - let timeLineCoordinateSystem - - let timePeriod = INITIAL_TIME_PERIOD - let datetime = NEW_SESSION_INITIAL_DATE - - let thisObject = { - setDatetime: setDatetime, - container: undefined, - drawBackground: drawBackground, - draw: draw, - getContainer: getContainer, - initialize: initialize, - finalize: finalize - } +function newTimelineChart () { + const MODULE_NAME = 'Timeline Chart' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let timeLineCoordinateSystem - thisObject.container = newContainer() - thisObject.container.initialize(MODULE_NAME) - thisObject.container.detectMouseOver = true + let timePeriod = INITIAL_TIME_PERIOD + let datetime = NEW_SESSION_INITIAL_DATE + + let thisObject = { + container: undefined, + fitFunction: undefined, + setDatetime: setDatetime, + drawBackground: drawBackground, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } - let initializationReady = false + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.detectMouseOver = true - let productsPanel + thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea - /* Background */ - let logoAssetA - let logoAssetB - let logoExchange - let logoAA - let canDrawLogoA = false - let canDrawLogoB = false - let canDrawLogoExchange = false - let canDrawLogoAA = false + let initializationReady = false - let plotterManager - let exchange - let market + let productsPanel - let productsPanelHandle - let timePeriodScale + /* Background */ + let logoAssetA + let logoAssetB + let logoExchange + let logoAA + let canDrawLogoA = false + let canDrawLogoB = false + let canDrawLogoExchange = false + let canDrawLogoAA = false - return thisObject + let plotterManager + let exchange + let market - function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } + let productsPanelHandle + let timePeriodScale - plotterManager.finalize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } - } + return thisObject - function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - - /* We load the logow we will need for the background. */ - exchange = pExchange - market = pMarket - timeLineCoordinateSystem = pTimeLineCoordinateSystem + function finalize () { + try { + if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) - }) + plotterManager.finalize() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } + } + } - let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA - productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) - let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner) - productsPanel.initialize(exchange, market) + function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - logoA = new Image() - logoB = new Image() - logoExchange = new Image() - logoAA = new Image() + /* We load the logow we will need for the background. */ + exchange = pExchange + market = pMarket + timeLineCoordinateSystem = pTimeLineCoordinateSystem - logoA.onload = onImageALoaded + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + }) - function onImageALoaded () { - canDrawLogoA = true - } + let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA + productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) + let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner) + productsPanel.initialize(exchange, market) - logoB.onload = onImageBLoaded + logoA = new Image() + logoB = new Image() + logoExchange = new Image() + logoAA = new Image() - function onImageBLoaded () { - canDrawLogoB = true - } + logoA.onload = onImageALoaded - logoExchange.onload = onImageExchangeLoaded - - function onImageExchangeLoaded () { - canDrawLogoExchange = true - } + function onImageALoaded () { + canDrawLogoA = true + } - logoAA.onload = onImageAALoaded + logoB.onload = onImageBLoaded - function onImageAALoaded () { - canDrawLogoAA = true - } + function onImageBLoaded () { + canDrawLogoB = true + } - logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png' - logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png' - logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' - logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' + logoExchange.onload = onImageExchangeLoaded + + function onImageExchangeLoaded () { + canDrawLogoExchange = true + } - // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) - timePeriod = INITIAL_TIME_PERIOD - datetime = NEW_SESSION_INITIAL_DATE + logoAA.onload = onImageAALoaded - /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */ + function onImageAALoaded () { + canDrawLogoAA = true + } - viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged) - viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) + logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png' + logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png' + logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' + logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - /* Initialize the Plotter Manager */ + // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) + timePeriod = INITIAL_TIME_PERIOD + datetime = NEW_SESSION_INITIAL_DATE - plotterManager = newPlottersManager() + /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */ - plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true) + viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged) + viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) - plotterManager.container.frame.position.x = 0 - plotterManager.container.frame.position.y = 0 + /* Initialize the Plotter Manager */ - plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady) + plotterManager = newPlottersManager() - function onPlotterManagerReady (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') } + plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true) - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') } - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) } + plotterManager.container.frame.position.x = 0 + plotterManager.container.frame.position.y = 0 - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - return - } + plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady) - timePeriodScale = newTimePeriodScale() - timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { - let currentTimePeriod = timePeriod - timePeriod = event.timePeriod - if (timePeriod !== currentTimePeriod) { - plotterManager.setTimePeriod(timePeriod) - } - }) + function onPlotterManagerReady (err) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') } - timePeriodScale.initialize(timeLineCoordinateSystem) + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) } - initializationReady = true - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) - return - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + return + } - function onZoomChanged (event) { - if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') } + timePeriodScale = newTimePeriodScale() + timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) + timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { + let currentTimePeriod = timePeriod + timePeriod = event.timePeriod + if (timePeriod !== currentTimePeriod) { + plotterManager.setTimePeriod(timePeriod) + } + }) - if (initializationReady === true) { - recalculateCurrentDatetime() + timePeriodScale.initialize(timeLineCoordinateSystem) - // saveUserPosition(thisObject.container, timeLineCoordinateSystem) - } - } + initializationReady = true + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } - function setDatetime (pDatetime) { - if (INFO_LOG === true) { logger.write('[INFO] setDatetime -> Entering function.') } + function onZoomChanged (event) { + if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') } - /* This function is used when the time is changed through the user interface, but without zooming or panning. */ - /* No matter if the day changed or not, we need to inform all visible Plotters. */ + if (initializationReady === true) { + recalculateCurrentDatetime() - if (thisObject.container.frame.isInViewPort()) { - plotterManager.setDatetime(pDatetime) - plotterManager.positionAtDatetime(pDatetime) - } - } + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) + } + } - function onOffsetChanged () { - if (INFO_LOG === true) { logger.write('[INFO] onOffsetChanged -> Entering function.') } + function setDatetime (pDatetime) { + if (INFO_LOG === true) { logger.write('[INFO] setDatetime -> Entering function.') } - if (initializationReady === true) { - if (thisObject.container.frame.isInViewPort()) { - recalculateCurrentDatetime() - // saveUserPosition(thisObject.container, timeLineCoordinateSystem) - } - } - } + /* This function is used when the time is changed through the user interface, but without zooming or panning. */ + /* No matter if the day changed or not, we need to inform all visible Plotters. */ - function recalculateCurrentDatetime () { - if (INFO_LOG === true) { logger.write('[INFO] recalculateCurrentDatetime -> Entering function.') } + if (thisObject.container.frame.isInViewPort()) { + plotterManager.setDatetime(pDatetime) + plotterManager.positionAtDatetime(pDatetime) + } + } - /* + function onOffsetChanged () { + if (INFO_LOG === true) { logger.write('[INFO] onOffsetChanged -> Entering function.') } - The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we - must calculate. + if (initializationReady === true) { + if (thisObject.container.frame.isInViewPort()) { + recalculateCurrentDatetime() + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) + } + } + } - */ + function recalculateCurrentDatetime () { + if (INFO_LOG === true) { logger.write('[INFO] recalculateCurrentDatetime -> Entering function.') } - let center = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 - } + /* - center = unTransformThisPoint(center, thisObject.container) - center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) + The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we + must calculate. - let newDate = new Date(0) - newDate.setUTCSeconds(center.x / 1000) + */ - datetime = newDate + let center = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 + } - plotterManager.setDatetime(datetime) + center = unTransformThisPoint(center, thisObject.container) + center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) - thisObject.container.eventHandler.raiseEvent('Datetime Changed', datetime) - } + let newDate = new Date(0) + newDate.setUTCSeconds(center.x / 1000) - function getContainer (point) { - if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } + datetime = newDate - let container + plotterManager.setDatetime(datetime) - container = timePeriodScale.getContainer(point) + thisObject.container.eventHandler.raiseEvent('Datetime Changed', datetime) + } - if (container !== undefined) { return container } + function getContainer (point) { + if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } - return container - } + let container - function tooTiny () { - if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) { - return true - } else { - return false - } - } + container = timePeriodScale.getContainer(point) - function tooSmall () { - if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) { - return true - } else { - return false - } - } + if (container !== undefined) { return container } - function drawBackground () { - if (thisObject.container.frame.isInViewPort()) { - if (window.CHART_ON_FOCUS === '') { - window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA + return container + } - drawChartsBackgroundImages() - } - } - } + function tooTiny () { + if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) { + return true + } else { + return false + } + } - function draw () { - if (thisObject.container.frame.isInViewPort()) { - drawChartsBackground() - plotterManager.draw() - timePeriodScale.draw() - } - } + function tooSmall () { + if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) { + return true + } else { + return false + } + } - function drawChartsBackground () { - /* We will paint some transparent background here. */ + function drawBackground () { + if (thisObject.container.frame.isInViewPort()) { + if (window.CHART_ON_FOCUS === '') { + window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA - let opacity = '0.9' + drawChartsBackgroundImages() + } + } + } - let fromPoint = { - x: 0, - y: 0 - } + function draw () { + if (thisObject.container.frame.isInViewPort()) { + drawChartsBackground() + plotterManager.draw() + timePeriodScale.draw() + } + } - let toPoint = { - x: thisObject.container.frame.width, - y: thisObject.container.frame.height - } + function drawChartsBackground () { + /* We will paint some transparent background here. */ - fromPoint = transformThisPoint(fromPoint, thisObject.container) - toPoint = transformThisPoint(toPoint, thisObject.container) + let opacity = '0.9' - fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint) - toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint) + let fromPoint = { + x: 0, + y: 0 + } - browserCanvasContext.beginPath() + let toPoint = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } - browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) - browserCanvasContext.closePath() + fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint) + toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint) - browserCanvasContext.fill() - } + browserCanvasContext.beginPath() - function drawChartsBackgroundImages () { - if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ + browserCanvasContext.closePath() - let fromPoint = { - x: 0, - y: 0 - } + browserCanvasContext.fill() + } - let toPoint = { - x: thisObject.container.frame.width, - y: thisObject.container.frame.height - } + function drawChartsBackgroundImages () { + if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } - fromPoint = transformThisPoint(fromPoint, thisObject.container) - toPoint = transformThisPoint(toPoint, thisObject.container) + /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ - /* Second we calculate the points for the images themselves */ + let fromPoint = { + x: 0, + y: 0 + } - let backgroundLogoPoint1 - let backgroundLogoPoint2 - - let imageHeight = 42 - let imageWidth = 150 - - let MAX_COLUMNS = 16 - let MAX_ROWS = 5 - let Y_TOP_MARGIN = 30 - - let point1 = { - x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.topLeft.y - } - - backgroundLogoPoint1 = { - x: getDateFromPoint(point1, thisObject.container, timeLineCoordinateSystem).valueOf(), - y: getRateFromPoint(point1, thisObject.container, timeLineCoordinateSystem) - } - - let point2 = { - x: viewPort.visibleArea.topLeft.x + imageWidth * 8, - y: viewPort.visibleArea.topLeft.y - } - - backgroundLogoPoint2 = { - x: getDateFromPoint(point2, thisObject.container, timeLineCoordinateSystem).valueOf(), - y: getRateFromPoint(point2, thisObject.container, timeLineCoordinateSystem) - } - - let currentCorner = { - x: getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem).valueOf(), - y: getRateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem) - } - - currentCorner.x = Math.trunc(currentCorner.x / (backgroundLogoPoint2.x - backgroundLogoPoint1.x)) * (backgroundLogoPoint2.x - backgroundLogoPoint1.x) - - let rowHight = (viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y) / 4.5 - - imagePoint = timeLineCoordinateSystem.transformThisPoint(currentCorner) - imagePoint = transformThisPoint(imagePoint, thisObject.container) - - let offSet = 0 - let imagePosition = { - x: 0, - y: 0 - } - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 0; i < MAX_COLUMNS; i = i + 4) { - let logo = logoA - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - - offSet = 0 - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 1; i < MAX_COLUMNS; i = i + 4) { - let logo = logoB - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - - offSet = 0 - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 2; i < MAX_COLUMNS; i = i + 4) { - let logo = logoExchange - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - - offSet = 0 - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 3; i < MAX_COLUMNS; i = i + 4) { - let logo = logoAA - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - } - } + let toPoint = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) + + /* Second we calculate the points for the images themselves */ + + let backgroundLogoPoint1 + let backgroundLogoPoint2 + + let imageHeight = 42 + let imageWidth = 150 + + const MAX_COLUMNS = 16 + const MAX_ROWS = 5 + const Y_TOP_MARGIN = 30 + const MIN_ROW_HIGHT = 100 + + let point1 = { + x: viewPort.visibleArea.topLeft.x, + y: viewPort.visibleArea.topLeft.y + } + + backgroundLogoPoint1 = { + x: getDateFromPoint(point1, thisObject.container, timeLineCoordinateSystem).valueOf(), + y: getRateFromPoint(point1, thisObject.container, timeLineCoordinateSystem) + } + + let point2 = { + x: viewPort.visibleArea.topLeft.x + imageWidth * 8, + y: viewPort.visibleArea.topLeft.y + } + + backgroundLogoPoint2 = { + x: getDateFromPoint(point2, thisObject.container, timeLineCoordinateSystem).valueOf(), + y: getRateFromPoint(point2, thisObject.container, timeLineCoordinateSystem) + } + + let currentCorner = { + x: getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem).valueOf(), + y: getRateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem) + } + + currentCorner.x = Math.trunc(currentCorner.x / (backgroundLogoPoint2.x - backgroundLogoPoint1.x)) * (backgroundLogoPoint2.x - backgroundLogoPoint1.x) + + let rowHight = (viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y) / 4.5 + if (rowHight < MIN_ROW_HIGHT) { rowHight = MIN_ROW_HIGHT } + + imagePoint = timeLineCoordinateSystem.transformThisPoint(currentCorner) + imagePoint = transformThisPoint(imagePoint, thisObject.container) + + let offSet = 0 + let imagePosition = { + x: 0, + y: 0 + } + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 0; i < MAX_COLUMNS; i = i + 4) { + let logo = logoA + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + + offSet = 0 + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 1; i < MAX_COLUMNS; i = i + 4) { + let logo = logoB + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + + offSet = 0 + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 2; i < MAX_COLUMNS; i = i + 4) { + let logo = logoExchange + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + + offSet = 0 + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 3; i < MAX_COLUMNS; i = i + 4) { + let logo = logoAA + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + } +} diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 3533d5dd8..380246842 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -153,11 +153,9 @@ function newChartSpace () { drawSpaceBackground() - if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.drawBackground() - } + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() } } From c01bcefc4637ded23dccd4bb5c8f28f4ff2e7285 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 08:21:21 +0200 Subject: [PATCH 108/143] Mouse moving out of the canvas: fixed --- Canvas.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index d69ea61a4..0362fae51 100644 --- a/Canvas.js +++ b/Canvas.js @@ -9,7 +9,6 @@ function newCanvas () { const MODULE_NAME = 'Canvas' const INFO_LOG = false const ERROR_LOG = true - const INTENSIVE_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -96,6 +95,7 @@ function newCanvas () { browserCanvas.removeEventListener('mouseup', onMouseUp, false) browserCanvas.removeEventListener('mousemove', onMouseMove, false) browserCanvas.removeEventListener('click', onMouseClick, false) + browserCanvas.removeEventListener('mouseout', onMouseOut, false) /* Mouse wheel events. */ @@ -262,6 +262,7 @@ function newCanvas () { browserCanvas.addEventListener('mouseup', onMouseUp, false) browserCanvas.addEventListener('mousemove', onMouseMove, false) browserCanvas.addEventListener('click', onMouseClick, false) + browserCanvas.addEventListener('mouseout', onMouseOut, false) /* Mouse wheel events. */ @@ -464,10 +465,23 @@ function newCanvas () { } } - function onMouseUp (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') } + function onMouseOut (event) { + deactivateDragging(event) + /* When the mouse leaves the canvas, our elements needs to react to the fact that the mouse is over a far away place */ + let thisEvent = { + pageX: 100000000000, + pageY: 100000000000 + } + onMouseOver(thisEvent) + } + + function onMouseUp (event) { + deactivateDragging(event) + } + + function deactivateDragging (event) { + try { if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) { thisObject.eventHandler.raiseEvent('Drag Finished', undefined) } @@ -495,8 +509,6 @@ function newCanvas () { function onMouseMove (event) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') } - let point = { x: event.pageX, y: event.pageY - window.canvasApp.topMargin @@ -541,8 +553,6 @@ function newCanvas () { function onMouseOver (event) { try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } - /* Then we check who is the current object underneeth the mounse. */ let point = { @@ -695,8 +705,6 @@ function newCanvas () { function checkDrag (event) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') } - if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { let point = { x: event.pageX, From 060e2650df0bf9d4a371cb30ee77defd75b9a73f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 08:46:27 +0200 Subject: [PATCH 109/143] draggTo function implemented at container --- Canvas.js | 7 +------ Container.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/Canvas.js b/Canvas.js index 0362fae51..9969ce316 100644 --- a/Canvas.js +++ b/Canvas.js @@ -744,12 +744,7 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - if (containerBeingDragged.notDraggingOnX === false) { - containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x - } - if (containerBeingDragged.notDraggingOnY === false) { - containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y - } + containerBeingDragged.draggTo(displaceVector) } } diff --git a/Container.js b/Container.js index 88c619091..c9db63103 100644 --- a/Container.js +++ b/Container.js @@ -14,6 +14,7 @@ function newContainer () { isWheelable: false, detectMouseOver: false, name: undefined, + draggTo: draggTo, initialize: initialize, finalize: finalize, connectToParent: connectToParent, @@ -184,4 +185,13 @@ function newContainer () { } return false } + + function draggTo (point) { + if (thisObject.notDraggingOnX === false) { + thisObject.frame.position.x = thisObject.frame.position.x + point.x + } + if (thisObject.notDraggingOnY === false) { + thisObject.frame.position.y = thisObject.frame.position.y + point.y + } + } } From de087c1661449f5952220cbb07cd7731d35e09e0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 09:39:39 +0200 Subject: [PATCH 110/143] Plotter panels cannot be dragged outside the chart space --- Canvas.js | 5 ++++- Container.js | 38 +++++++++++++++++++++++++++----- Spaces/ChartSpace.js | 21 ++++++++++++++++++ Spaces/FloatingSpace.js | 49 +++++++++++++++++++++++++++++++++++++++++ Spaces/PanelsSpace.js | 1 + 5 files changed, 107 insertions(+), 7 deletions(-) diff --git a/Canvas.js b/Canvas.js index 9969ce316..345887e08 100644 --- a/Canvas.js +++ b/Canvas.js @@ -744,7 +744,10 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - containerBeingDragged.draggTo(displaceVector) + let moveSucceed = containerBeingDragged.moveTo(displaceVector) + if (moveSucceed === false) { + deactivateDragging(event) + } } } diff --git a/Container.js b/Container.js index c9db63103..c29b5ee0b 100644 --- a/Container.js +++ b/Container.js @@ -14,7 +14,9 @@ function newContainer () { isWheelable: false, detectMouseOver: false, name: undefined, - draggTo: draggTo, + fitFunction: undefined, + isVisibleFunction: undefined, + moveTo: moveTo, initialize: initialize, finalize: finalize, connectToParent: connectToParent, @@ -186,12 +188,36 @@ function newContainer () { return false } - function draggTo (point) { - if (thisObject.notDraggingOnX === false) { - thisObject.frame.position.x = thisObject.frame.position.x + point.x + function moveTo (point) { + /* This function will move the container to the destination point. If it has a visible function will use it + to see if the container can be moved there or not. It wont if the center will not be visible. + + Returns true if move was possible, false if not. */ + + let checkPoint = {} + + if (thisObject.isVisibleFunction === undefined) { + drag() + return true + } else { + checkPoint.x = thisObject.frame.position.x + point.x + thisObject.frame.width / 2 + checkPoint.y = thisObject.frame.position.y + point.y + thisObject.frame.height / 2 + let isVisible = thisObject.isVisibleFunction(checkPoint) + if (isVisible === true) { + drag() + return true + } else { + return false + } } - if (thisObject.notDraggingOnY === false) { - thisObject.frame.position.y = thisObject.frame.position.y + point.y + function drag () { + if (thisObject.notDraggingOnX === false) { + thisObject.frame.position.x = thisObject.frame.position.x + point.x + } + if (thisObject.notDraggingOnY === false) { + thisObject.frame.position.y = thisObject.frame.position.y + point.y + } } } } + diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 380246842..0ffeab7c3 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -17,6 +17,7 @@ function newChartSpace () { visible: true, container: undefined, fitIntoVisibleArea: fitIntoVisibleArea, + isThisPointVisible: isThisPointVisible, physics: physics, drawBackground: drawBackground, draw: draw, @@ -136,6 +137,26 @@ function newChartSpace () { return returnPoint } + function isThisPointVisible (point) { + if (point.x > browserCanvas.width) { + return false + } + + if (point.x < 0) { + return false + } + + if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + return false + } + + if (point.y < 0) { + return false + } + + return true + } + function physics () { thisObject.container.frame.height = BOTTOM_SPACE_POSITION diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index cc2887e18..521ae07d6 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -13,6 +13,8 @@ function newFloatingSpace () { strategyPartConstructor: undefined, noteSets: undefined, container: undefined, + fitIntoVisibleArea: fitIntoVisibleArea, + isThisPointVisible: isThisPointVisible, makeVisible: makeVisible, makeInvisible: makeInvisible, draw: draw, @@ -61,6 +63,53 @@ function newFloatingSpace () { thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } + function fitIntoVisibleArea (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + let returnPoint = { + x: point.x, + y: point.y + } + + if (point.x > browserCanvas.width) { + returnPoint.x = browserCanvas.width + } + + if (point.x < 0) { + returnPoint.x = 0 + } + + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + } + + if (point.y > browserCanvas.height) { + returnPoint.y = browserCanvas.height + } + + return returnPoint + } + + function isThisPointVisible (point) { + if (point.x > browserCanvas.width) { + return false + } + + if (point.x < 0) { + return false + } + + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + return false + } + + if (point.y > browserCanvas.height) { + return false + } + + return true + } + function onMouseWheel (event) { thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta) } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 6d3265132..f182da1c3 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -55,6 +55,7 @@ function newPanelsSpace () { { panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName) panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea + panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible panel.initialize() break } From 24e378ca7f774a7f89450f331d22b1b67ae22385 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 09:46:27 +0200 Subject: [PATCH 111/143] Product Panel not leaving the chart area --- Panels/ProductsPanel.js | 13 ++++++------- Spaces/PanelsSpace.js | 2 ++ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 222ae19e1..5f690130c 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -1,5 +1,6 @@ function newProductsPanel () { let thisObject = { + fitFunction: undefined, container: undefined, getLoadingProductCards: getLoadingProductCards, draw: draw, @@ -9,7 +10,7 @@ function newProductsPanel () { /* Cointainer stuff */ - var container = newContainer() + let container = newContainer() container.initialize() @@ -43,9 +44,7 @@ function newProductsPanel () { thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; - thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea - - var position = { + let position = { x: viewPort.visibleArea.topLeft.x, y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height } @@ -161,7 +160,7 @@ function newProductsPanel () { if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 } visibleProductCards = [] - var lastY = 5 + let lastY = 5 for (let i = 0; i < productCards.length; i++) { if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) { @@ -204,7 +203,7 @@ function newProductsPanel () { } function getContainer (point) { - var container + let container container = panelTabButton.getContainer(point) if (container !== undefined) { return container } @@ -214,7 +213,7 @@ function newProductsPanel () { if (thisObject.container.frame.isThisPointHere(point, true) === true) { /* Now we see which is the inner most container that has it */ - for (var i = 0; i < visibleProductCards.length; i++) { + for (let i = 0; i < visibleProductCards.length; i++) { container = visibleProductCards[i].getContainer(point) if (container !== undefined) { diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index f182da1c3..04753532f 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -49,6 +49,8 @@ function newPanelsSpace () { case 'Products Panel': { panel = newProductsPanel() + panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea + panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible break } case 'Plotter Panel': From 37fc30d90fe2a2c6d3170aaef308f11b097fc4e0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 09:50:09 +0200 Subject: [PATCH 112/143] fine tuning viewport margin --- ChartsSpace/ViewPort.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js index c34100d5e..e3d4ee247 100644 --- a/ChartsSpace/ViewPort.js +++ b/ChartsSpace/ViewPort.js @@ -12,7 +12,7 @@ function newViewPort () { let ANIMATION_INCREMENT = 0.25 let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - let BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + let BOTTOM_MARGIN = 20 + BOTTOM_SPACE_HEIGHT let LEFT_MARGIN = 50 let RIGHT_MARGIN = 50 let MARGINS = { @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 15 + browserCanvas.height - BOTTOM_SPACE_POSITION + BOTTOM_MARGIN = 20 + browserCanvas.height - BOTTOM_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { From abc586b18ce9af762f0769f4fa179bdb7ce7c57d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 14:20:19 +0200 Subject: [PATCH 113/143] Visible body and larger workspace --- FloatingSpace/FloatingObject.js | 2 ++ FloatingSpace/StrategyPart.js | 18 ++++++++++++---- FloatingSpace/StrategyPartConstructor.js | 2 ++ Spaces/FloatingSpace.js | 27 ++++++++++++++---------- 4 files changed, 34 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index b90da54a3..5137e6d2d 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -7,6 +7,7 @@ function newFloatingObject () { logger.fileName = MODULE_NAME let thisObject = { + fitFunction: undefined, container: undefined, positionLocked: false, isOnFocus: false, @@ -61,6 +62,7 @@ function newFloatingObject () { thisObject.container.finalize() thisObject.container = undefined thisObject.payload = undefined + thisObject.fitFunction = undefined } function initialize (type, payload) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 57c02c27d..50d0cd8a0 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -7,6 +7,7 @@ function newStrategyPart () { logger.fileName = MODULE_NAME let thisObject = { + fitFunction: undefined, type: undefined, menu: undefined, isOnFocus: false, @@ -53,6 +54,7 @@ function newStrategyPart () { thisObject.menu = undefined thisObject.partTitle.finalize() thisObject.partTitle = undefined + thisObject.fitFunction = undefined if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.finalize() @@ -601,11 +603,19 @@ function newStrategyPart () { let radius = thisObject.container.frame.radius - if (radius > 0.5 && image === undefined) { - /* Main FloatingObject */ + if (radius > 0.5) { + const VISIBLE_RADIUS = 5 + + let visiblePosition = { + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y + } + + visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition) + visiblePosition = thisObject.fitFunction(visiblePosition) browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = thisObject.payload.floatingObject.fillStyle @@ -613,7 +623,7 @@ function newStrategyPart () { browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 1 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS / 2, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index f3f475ef8..4f32eb23c 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -31,11 +31,13 @@ function newStrategyPartConstructor () { function createStrategyPart (payload) { let floatingObject = newFloatingObject() + floatingObject.fitFunction = canvas.floatingSpace.fitIntoVisibleArea floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) floatingObject.initialize('Strategy Part', payload) payload.floatingObject = floatingObject let strategyPart = newStrategyPart() + strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.initialize(payload) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true) payload.uiObject = strategyPart diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 521ae07d6..d160d6bc8 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -1,11 +1,11 @@ -  + function newFloatingSpace () { const MODULE_NAME = 'Floating Space' const ERROR_LOG = true - /* - The Floating Space is the place where floating elements like floatingObjects, live and are rendered. - This space has its own physics which helps with the animation of these objects and also preventing them to overlap. - */ + /* + The Floating Space is the place where floating elements like floatingObjects, live and are rendered. + This space has its own physics which helps with the animation of these objects and also preventing them to overlap. + */ let thisObject = { floatingLayer: undefined, // This is the array of floatingObjects being displayed @@ -31,8 +31,8 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.width = browserCanvas.width * 3 - thisObject.container.frame.height = browserCanvas.height * 3 + thisObject.container.frame.width = browserCanvas.width * 10 + thisObject.container.frame.height = browserCanvas.height * 10 thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 @@ -64,7 +64,9 @@ function newFloatingSpace () { } function fitIntoVisibleArea (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + const RED_LINE = 5 let returnPoint = { x: point.x, @@ -79,8 +81,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE } if (point.y > browserCanvas.height) { @@ -91,6 +93,8 @@ function newFloatingSpace () { } function isThisPointVisible (point) { + const RED_LINE = 5 + if (point.x > browserCanvas.width) { return false } @@ -99,7 +103,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { return false } @@ -155,3 +159,4 @@ function newFloatingSpace () { browserCanvasContext.fill() } } + From cdd9d1fc82bb143cfd785683f7ef520cd80e057d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 17:04:22 +0200 Subject: [PATCH 114/143] BUG FIXED when moving over textarea --- Canvas.js | 4 ++-- FloatingSpace/CodeEditor.js | 9 ++++++++- FloatingSpace/StrategyPart.js | 5 +++++ Globals.js | 1 + 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/Canvas.js b/Canvas.js index 345887e08..52410f6b9 100644 --- a/Canvas.js +++ b/Canvas.js @@ -470,8 +470,8 @@ function newCanvas () { /* When the mouse leaves the canvas, our elements needs to react to the fact that the mouse is over a far away place */ let thisEvent = { - pageX: 100000000000, - pageY: 100000000000 + pageX: VERY_LARGE_NUMBER, + pageY: VERY_LARGE_NUMBER } onMouseOver(thisEvent) } diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 99df8b58f..cd671d28d 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -98,7 +98,14 @@ function newCodeEditor () { function getContainer (point) { let container - if (thisObject.visitble === true) { + if (thisObject.visible === true) { + if (point.x === VERY_LARGE_NUMBER) { + /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that + anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is + triggered. We compensate recognizing this coordinate and returning our container. */ + return thisObject.container + } + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { return thisObject.container } else { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 50d0cd8a0..dc854e14f 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -381,6 +381,11 @@ function newStrategyPart () { function getContainer (point) { let container + if (thisObject.codeEditor !== undefined) { + container = thisObject.codeEditor.getContainer(point) + if (container !== undefined) { return container } + } + container = thisObject.partTitle.getContainer(point) if (container !== undefined) { return container } diff --git a/Globals.js b/Globals.js index e89a71204..6e72065c2 100644 --- a/Globals.js +++ b/Globals.js @@ -151,6 +151,7 @@ const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000; let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. let INITIAL_ZOOM_LEVEL = -28.25 // This is the zoom level at the view port in which the APP starts. let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. +let VERY_LARGE_NUMBER = 100000000000 let maxDate = new Date(); maxDate.setMilliseconds(0); From 711829f46de244cd69f0f3cbbb73fd23680c2445 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 17:40:24 +0200 Subject: [PATCH 115/143] moveTo refactored --- Canvas.js | 2 +- Container.js | 6 +++--- FloatingSpace/StrategyPartTitle.js | 9 ++++++++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/Canvas.js b/Canvas.js index 52410f6b9..481516273 100644 --- a/Canvas.js +++ b/Canvas.js @@ -744,7 +744,7 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - let moveSucceed = containerBeingDragged.moveTo(displaceVector) + let moveSucceed = containerBeingDragged.displace(displaceVector) if (moveSucceed === false) { deactivateDragging(event) } diff --git a/Container.js b/Container.js index c29b5ee0b..3fe909ec9 100644 --- a/Container.js +++ b/Container.js @@ -16,7 +16,7 @@ function newContainer () { name: undefined, fitFunction: undefined, isVisibleFunction: undefined, - moveTo: moveTo, + displace: displace, initialize: initialize, finalize: finalize, connectToParent: connectToParent, @@ -188,8 +188,8 @@ function newContainer () { return false } - function moveTo (point) { - /* This function will move the container to the destination point. If it has a visible function will use it + function displace (point) { + /* This function will move the container according to the vector received. If it has a visible function will use it to see if the container can be moved there or not. It wont if the center will not be visible. Returns true if move was possible, false if not. */ diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index a13229cd6..8725bd7ce 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -90,6 +90,14 @@ function newStrategyPartTitle () { function getContainer (point) { let container + if (thisObject.editMode === true) { + if (point.x === VERY_LARGE_NUMBER) { + /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that + anyone can react. In our case, this object has an html input element that is not part of the canvas, so the event is + triggered. We compensate recognizing this coordinate and returning our container. */ + return thisObject.container + } + } if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { @@ -233,4 +241,3 @@ function newStrategyPartTitle () { return title } } - From f2e0a01522674212c9de7bc870bea91aa6b9f29e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 17:56:34 +0200 Subject: [PATCH 116/143] exiting editing mode on time --- Container.js | 16 +++++- FloatingSpace/StrategyPart.js | 10 ++-- FloatingSpace/StrategyPartConstructor.js | 2 +- FloatingSpace/StrategyPartTitle.js | 68 +++++++++++++----------- 4 files changed, 56 insertions(+), 40 deletions(-) diff --git a/Container.js b/Container.js index 3fe909ec9..2b467470f 100644 --- a/Container.js +++ b/Container.js @@ -32,6 +32,7 @@ function newContainer () { let onMouseNotOverParentEvent = false let onFocusParentEvent = false let onNotFocusParentEvent = false + let onDisplaceParentEvent = false let isConnectedToParent = false @@ -40,6 +41,7 @@ function newContainer () { let onMouseNotOverEventSubscriptionId let onFocusEventSubscriptionId let onNotFocusEventSubscriptionId + let onDisplaceEventSubscriptionId return thisObject @@ -50,6 +52,7 @@ function newContainer () { thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId) + thisObject.parentContainer.eventHandler.stopListening(onDisplaceEventSubscriptionId) thisObject.parentContainer = undefined thisObject.eventHandler.finalize() @@ -82,7 +85,8 @@ function newContainer () { onMouseOverEvent, onMouseNotOverEvent, onFocusEvent, - onNotFocusEvent + onNotFocusEvent, + onDisplaceEvent ) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight @@ -93,6 +97,7 @@ function newContainer () { onMouseNotOverParentEvent = onMouseNotOverEvent onFocusParentEvent = onFocusEvent onNotFocusParentEvent = onNotFocusEvent + onDisplaceParentEvent = onDisplaceEvent isConnectedToParent = true @@ -115,6 +120,9 @@ function newContainer () { if (onNotFocusParentEvent === true) { onNotFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onNotFocus', onNotFocus) } + if (onDisplaceParentEvent === true) { + onDisplaceEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDisplace', onDisplace) + } if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -163,6 +171,10 @@ function newContainer () { thisObject.eventHandler.raiseEvent('onNotFocus', event) } + function onDisplace (event) { + thisObject.eventHandler.raiseEvent('onDisplace', event) + } + function isForThisPurpose (purpose) { if (purpose !== undefined) { switch (purpose) { @@ -217,7 +229,7 @@ function newContainer () { if (thisObject.notDraggingOnY === false) { thisObject.frame.position.y = thisObject.frame.position.y + point.y } + thisObject.eventHandler.raiseEvent('onDisplace', event) } } } - diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index dc854e14f..147996974 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -38,14 +38,14 @@ function newStrategyPart () { let selfFocusEventSubscriptionId let selfNotFocuskEventSubscriptionId - let selfMouseClickEventSubscriptionId + let selfDisplaceEventSubscriptionId return thisObject function finalize () { thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) - thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfDisplaceEventSubscriptionId) thisObject.container.finalize() thisObject.container = undefined @@ -375,7 +375,7 @@ function newStrategyPart () { selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) - selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfDisplaceEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDisplace', onDisplace) } function getContainer (point) { @@ -427,8 +427,8 @@ function newStrategyPart () { } } - function onMouseClick (event) { - + function onDisplace (event) { + thisObject.partTitle.exitEditMode() } function drawBackground () { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 4f32eb23c..68dc58a74 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -39,7 +39,7 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.initialize(payload) - strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true) + strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart const FRICTION = 0.97 diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 8725bd7ce..d39e90aa3 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -190,45 +190,49 @@ function newStrategyPartTitle () { } function drawTitleBackground () { - let params = { - cornerRadius: 3, - lineWidth: 0.1, - container: thisObject.container, - borderColor: UI_COLOR.BLACK, - backgroundColor: UI_COLOR.BLACK, - castShadow: false, - opacity: 0.25 - } + if (thisObject.editMode !== true) { + let params = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.BLACK, + backgroundColor: UI_COLOR.BLACK, + castShadow: false, + opacity: 0.25 + } - roundedCornersBackground(params) + roundedCornersBackground(params) + } } function drawText () { - let radius = thisObject.container.frame.radius - let labelPoint - let fontSize = thisObject.payload.floatingObject.currentFontSize - let label + if (thisObject.editMode !== true) { + let radius = thisObject.container.frame.radius + let labelPoint + let fontSize = thisObject.payload.floatingObject.currentFontSize + let label - if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true)) { - browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - label = thisObject.payload.title - - if (label !== undefined) { - label = trimTitle(label) - - labelPoint = { - x: 0, - y: thisObject.container.frame.height * 0.8 - } - - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true)) { + browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + + label = thisObject.payload.title + + if (label !== undefined) { + label = trimTitle(label) + + labelPoint = { + x: 0, + y: thisObject.container.frame.height * 0.8 + } + + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } } } } From 61f69b89494e450c52e82d210599de10e07f11df Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 18:01:08 +0200 Subject: [PATCH 117/143] min amount of caracters in title --- FloatingSpace/StrategyPartTitle.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index d39e90aa3..38d1ca5d4 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -149,8 +149,10 @@ function newStrategyPartTitle () { thisObject.editMode = false let input = document.getElementById('input') input.style.display = 'none' - thisObject.payload.title = input.value - thisObject.payload.node.name = input.value + if (input.value.length > 2) { + thisObject.payload.title = input.value + thisObject.payload.node.name = input.value + } } } From 8365f81e3b16793690635387379032c6be02b1c4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 18:25:05 +0200 Subject: [PATCH 118/143] FIXED: cannot edit title outside visible area --- FloatingSpace/StrategyPart.js | 3 +++ FloatingSpace/StrategyPartConstructor.js | 1 + FloatingSpace/StrategyPartTitle.js | 13 ++++++++++++- 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 147996974..9c308a3f4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -8,6 +8,7 @@ function newStrategyPart () { let thisObject = { fitFunction: undefined, + isVisibleFunction: undefined, type: undefined, menu: undefined, isOnFocus: false, @@ -55,6 +56,7 @@ function newStrategyPart () { thisObject.partTitle.finalize() thisObject.partTitle = undefined thisObject.fitFunction = undefined + thisObject.isVisibleFunction = undefined if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.finalize() @@ -358,6 +360,7 @@ function newStrategyPart () { /* Initialize Part Title */ thisObject.partTitle = newStrategyPartTitle() + thisObject.partTitle.isVisibleFunction = thisObject.isVisibleFunction thisObject.partTitle.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) thisObject.partTitle.initialize(thisObject.payload) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 68dc58a74..bc00726d8 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -38,6 +38,7 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea + strategyPart.isVisibleFunction = canvas.floatingSpace.isThisPointVisible strategyPart.initialize(payload) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 38d1ca5d4..74553641d 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -7,6 +7,7 @@ function newStrategyPartTitle () { logger.fileName = MODULE_NAME let thisObject = { + isVisibleFunction: undefined, allwaysVisible: undefined, editMode: undefined, container: undefined, @@ -40,6 +41,7 @@ function newStrategyPartTitle () { thisObject.container.finalize() thisObject.container = undefined thisObject.payload = undefined + thisObject.isVisibleFunction = undefined } function initialize (payload) { @@ -141,7 +143,15 @@ function newStrategyPartTitle () { } function onMouseClick (event) { - enterEditMode() + let checkPoint = { + x: 0, + y: 0 + } + checkPoint = thisObject.container.frame.frameThisPoint(checkPoint) + + if (thisObject.isVisibleFunction(checkPoint) === true) { + enterEditMode() + } } function exitEditMode () { @@ -247,3 +257,4 @@ function newStrategyPartTitle () { return title } } + From 2a50934f910c88da35868790c8b8a9848de717a4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 18:52:01 +0200 Subject: [PATCH 119/143] FIXED: Text editor cannot open outside visible area --- FloatingSpace/CodeEditor.js | 12 +++++++++++- FloatingSpace/StrategyPart.js | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index cd671d28d..edd2cfd74 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -3,6 +3,7 @@ function newCodeEditor () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { + isVisibleFunction: undefined, iconOK: undefined, iconNOT_OK: undefined, visible: false, @@ -42,6 +43,7 @@ function newCodeEditor () { thisObject.iconOK = undefined thisObject.iconNOT_OK = undefined thisObject.payload = undefined + thisObject.isVisibleFunction = undefined } function initialize () { @@ -135,7 +137,15 @@ function newCodeEditor () { } textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) - if (textAreaPosition.y < window.canvasApp.topMargin) { deactivate() } + if (thisObject.visible === true) { + let checkPosition = { + x: textAreaPosition.x, + y: textAreaPosition.y - window.canvasApp.topMargin + } + if (thisObject.isVisibleFunction(checkPosition) === false) { + deactivate() + } + } if (thisObject.visible === true) { let textAreaDiv = document.getElementById('textAreaDiv') textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 9c308a3f4..30569f65e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -242,6 +242,7 @@ function newStrategyPart () { case 'Phase': { imagePath = 'Images/icons/style-01/testing.png' thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction thisObject.codeEditor.initialize() thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) @@ -317,6 +318,7 @@ function newStrategyPart () { case 'Condition': { imagePath = 'Images/icons/style-01/testing.png' thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction thisObject.codeEditor.initialize() thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ From 1262897c7a7a2009e8baed687aa6aa3ebfee3c17 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 19:05:27 +0200 Subject: [PATCH 120/143] Side Panel Hidden --- Spaces/StrategySpace.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 8885bd5a3..d150059e9 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -21,14 +21,14 @@ function newStrategySpace () { return thisObject async function initialize () { - thisObject.sidePanel = newSidePanel() - thisObject.sidePanel.initialize() + // thisObject.sidePanel = newSidePanel() + // thisObject.sidePanel.initialize() thisObject.investmentPlanWorkspace = newInvestmentPlanWorkspace() - thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) + // thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) await thisObject.investmentPlanWorkspace.initialize() - thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) + // thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) } function makeVisible () { @@ -60,6 +60,8 @@ function newStrategySpace () { } function draw () { - thisObject.sidePanel.draw() + if (thisObject.sidePanel !== undefined) { + thisObject.sidePanel.draw() + } } } From 15a18b2b3f7a6bf865abb5d2f22ba2053c276601 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 10:13:09 +0200 Subject: [PATCH 121/143] REmoving Side Bar for now --- Canvas.js | 1 - Frame.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/Canvas.js b/Canvas.js index 481516273..e8543455c 100644 --- a/Canvas.js +++ b/Canvas.js @@ -169,7 +169,6 @@ function newCanvas () { animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) - animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) diff --git a/Frame.js b/Frame.js index 567f77c2b..a726eae7d 100644 --- a/Frame.js +++ b/Frame.js @@ -347,7 +347,7 @@ function newFrame () { /* We paint the title bar now */ - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)' browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) From 2de41a3ae9f2f577522a1818db618afde440a3ef Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 11:16:31 +0200 Subject: [PATCH 122/143] Try to put a border to the time machine --- ChartsSpace/TimeMachine.js | 26 ++++++++++++++++++++++---- Spaces/ChartSpace.js | 11 +---------- Utilities/RoundedCornersBackground.js | 23 ++++++++++++++++++----- 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 435636caa..b5a373126 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -229,9 +229,13 @@ function newTimeMachine () { } function drawBackground () { - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.drawBackground() + thisBackground() + + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.drawBackground() + } } } @@ -249,6 +253,21 @@ function newTimeMachine () { } } + function thisBackground () { + let params = { + cornerRadius: 15, + lineWidth: 5, + opacity: 1, + container: thisObject.container, + borderColor: UI_COLOR.RUSTED_RED, + backgroundColor: UI_COLOR.WHITE, + fitFunction: thisObject.fitFunction, + coordinateSystem: timeLineCoordinateSystem + } + + roundedCornersBackground(params) + } + function recalculateScale () { if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } @@ -270,4 +289,3 @@ function newTimeMachine () { ) } } - diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 0ffeab7c3..39b9ac34b 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -8,7 +8,6 @@ changes, then all charts in it are replotted with the corresponging data. function newChartSpace () { const MODULE_NAME = 'Chart Space' - const INFO_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -37,8 +36,6 @@ function newChartSpace () { function finalize () { try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { let timeMachine = thisObject.timeMachines[i] timeMachine.finalize() @@ -49,8 +46,6 @@ function newChartSpace () { } function initialize (callBackFunction) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - let initializedCounter = 0 let toInitialize = 1 @@ -62,17 +57,13 @@ function newChartSpace () { timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 - + timeMachine.container.fitFunction = fitIntoVisibleArea timeMachine.initialize(onTimeMachineInitialized) function onTimeMachineInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') } - initializedCounter++ if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') } - callBackFunction(err) return } diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 3dd7bbf38..a940c81c8 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -21,10 +21,24 @@ function roundedCornersBackground (params) { /* Now the transformations. */ - borderPoint1 = params.container.frame.frameThisPoint(borderPoint1) - borderPoint2 = params.container.frame.frameThisPoint(borderPoint2) - borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) - borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) + if (params.coordinateSystem !== undefined) { // For instance Candles would use this + borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1) + borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2) + borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3) + borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4) + } else { + if (params.outsideViewPort === true) { // If the element is not affected by zoom + borderPoint1 = transformThisPoint(borderPoint1, params.container) + borderPoint2 = transformThisPoint(borderPoint2, params.container) + borderPoint3 = transformThisPoint(borderPoint3, params.container) + borderPoint4 = transformThisPoint(borderPoint4, params.container) + } else { // For instance Panels use this + borderPoint1 = params.container.frame.frameThisPoint(borderPoint1) + borderPoint2 = params.container.frame.frameThisPoint(borderPoint2) + borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) + borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) + } + } if (params.fitFunction !== undefined) { borderPoint1 = params.fitFunction(borderPoint1) @@ -89,4 +103,3 @@ function roundedCornersBackground (params) { browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')' browserCanvasContext.stroke() } - From c5a5b3365bad4b85ce7177a470fc485b7b64f478 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 11:37:17 +0200 Subject: [PATCH 123/143] Tyding into a folder --- UIControl.js => BottomSpace/UIControl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename UIControl.js => BottomSpace/UIControl.js (98%) diff --git a/UIControl.js b/BottomSpace/UIControl.js similarity index 98% rename from UIControl.js rename to BottomSpace/UIControl.js index ab8a9de48..515640b31 100644 --- a/UIControl.js +++ b/BottomSpace/UIControl.js @@ -37,7 +37,7 @@ function newUIControl () { } function getContainer (point) { - var container + let container /* First we check if thisObject point is inside thisObject space. */ From f76c511c05904a8156764aeaab5adbc5299ba07c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 12:07:36 +0200 Subject: [PATCH 124/143] Arrows at bottom space --- Spaces/BottomSpace.js | 92 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 707fe917f..875fbab59 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -5,6 +5,7 @@ let thisObject = { container: undefined, + status: 'BOTTOM', draw: draw, physics: physics, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -57,8 +58,11 @@ function physics () { /* Check the limits */ + thisObject.status = 'MIDDLE' + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + thisObject.status = 'BOTTOM' canvas.strategySpace.makeInvisible() } else { canvas.strategySpace.makeVisible() @@ -66,6 +70,7 @@ if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) { thisObject.container.frame.position.y = 0 + thisObject.status = 'TOP' canvas.panelsSpace.visible = false } else { canvas.panelsSpace.visible = true @@ -198,6 +203,93 @@ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() + + arrow() + } + + function arrow () { + const X_OFFSET = thisObject.container.frame.width / 2 + const Y_OFFSET = thisObject.container.frame.height / 2 + const HEIGHT = 6 + const WIDTH = 18 + const LINE_WIDTH = 3 + const OPACITY = 1 + const DISTANCE_BETWEEN_ARROWS = 9 + let ARROW_1_DIRECTION = 0 + let ARROW_2_DIRECTION = 0 + + switch (thisObject.status) { + + case ('TOP'): { + ARROW_1_DIRECTION = -1 + ARROW_2_DIRECTION = -1 + break + } + case ('MIDDLE'): { + ARROW_1_DIRECTION = 1 + ARROW_2_DIRECTION = -1 + break + } + case ('BOTTOM'): { + ARROW_1_DIRECTION = 1 + ARROW_2_DIRECTION = 1 + break + } + } + + point1 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 + } + + point2 = { + x: X_OFFSET, + y: Y_OFFSET - HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 + } + + point3 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + point4 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 + } + + point5 = { + x: X_OFFSET, + y: Y_OFFSET - HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 + } + + point6 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 + } + + point4 = thisObject.container.frame.frameThisPoint(point4) + point5 = thisObject.container.frame.frameThisPoint(point5) + point6 = thisObject.container.frame.frameThisPoint(point6) + + 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.moveTo(point4.x, point4.y) + browserCanvasContext.lineTo(point5.x, point5.y) + browserCanvasContext.lineTo(point6.x, point6.y) + + browserCanvasContext.lineWidth = LINE_WIDTH + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.stroke() } } From a4f199f792b0e7825a75a209e4b0be2cbd2dcd71 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 12:18:26 +0200 Subject: [PATCH 125/143] adjustment on arrows --- Spaces/BottomSpace.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 875fbab59..acc7d5cde 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -214,7 +214,7 @@ const WIDTH = 18 const LINE_WIDTH = 3 const OPACITY = 1 - const DISTANCE_BETWEEN_ARROWS = 9 + let DISTANCE_BETWEEN_ARROWS = 0 let ARROW_1_DIRECTION = 0 let ARROW_2_DIRECTION = 0 @@ -223,16 +223,19 @@ case ('TOP'): { ARROW_1_DIRECTION = -1 ARROW_2_DIRECTION = -1 + DISTANCE_BETWEEN_ARROWS = 6 break } case ('MIDDLE'): { ARROW_1_DIRECTION = 1 ARROW_2_DIRECTION = -1 + DISTANCE_BETWEEN_ARROWS = 9 break } case ('BOTTOM'): { ARROW_1_DIRECTION = 1 ARROW_2_DIRECTION = 1 + DISTANCE_BETWEEN_ARROWS = 6 break } } From 2fcd49ff13a3c46d0163cb2e98a0f9bb3a6cf1a3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:07:41 +0200 Subject: [PATCH 126/143] Refactoring to Trading System --- FloatingSpace/StrategyPart.js | 6 +++--- FloatingSpace/StrategyPartConstructor.js | 2 +- FloatingSpace/StrategyPartTitle.js | 2 +- Spaces/BottomSpace.js | 2 +- Spaces/StrategySpace.js | 18 ++++++++--------- StrategySpace/StrategyCollectionItem.js | 3 +-- .../{InvestmentPlan.js => TradingSystem.js} | 20 +++++++++---------- ...Workspace.js => TradingSystemWorkspace.js} | 10 +++++----- 8 files changed, 31 insertions(+), 32 deletions(-) rename StrategySpace/{InvestmentPlan.js => TradingSystem.js} (95%) rename StrategySpace/{InvestmentPlanWorkspace.js => TradingSystemWorkspace.js} (94%) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 30569f65e..41cd9e751 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -72,11 +72,11 @@ function newStrategyPart () { let menuItemsInitialValues = [] switch (thisObject.payload.node.type) { - case 'Investment Plan': { + case 'Trading System': { imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ { - action: 'Reload Investment Plan', + action: 'Reload Trading System', actionFunction: thisObject.payload.onMenuItemClick, label: 'Reload', visible: false, @@ -88,7 +88,7 @@ function newStrategyPart () { angle: -60 }, { - action: 'Save Investment Plan', + action: 'Save Trading System', actionFunction: thisObject.payload.onMenuItemClick, label: 'Save Changes', visible: false, diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index bc00726d8..662c806b2 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -46,7 +46,7 @@ function newStrategyPartConstructor () { const FRICTION = 0.97 switch (payload.node.type) { - case 'Investment Plan': { + case 'Trading System': { level_0() break } diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 74553641d..8597bff14 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -48,7 +48,7 @@ function newStrategyPartTitle () { thisObject.payload = payload switch (payload.node.type) { - case 'Investment Plan': { + case 'Trading System': { break } case 'Strategy': { diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index acc7d5cde..5e6ae3b05 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -44,7 +44,7 @@ } function onMouseClick (event) { - // canvas.strategySpace.investmentPlanWorkspace.showUp() + // canvas.strategySpace.tradingSystemWorkspace.showUp() } function resize () { diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index d150059e9..0d4264972 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -3,7 +3,7 @@ function newStrategySpace () { const MODULE_NAME = 'Strategy Space' let thisObject = { sidePanel: undefined, - investmentPlanWorkspace: undefined, + tradingSystemWorkspace: undefined, container: undefined, draw: draw, getContainer: getContainer, @@ -24,16 +24,16 @@ function newStrategySpace () { // thisObject.sidePanel = newSidePanel() // thisObject.sidePanel.initialize() - thisObject.investmentPlanWorkspace = newInvestmentPlanWorkspace() - // thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) - await thisObject.investmentPlanWorkspace.initialize() + thisObject.tradingSystemWorkspace = newTradingSystemWorkspace() + // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) + await thisObject.tradingSystemWorkspace.initialize() - // thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) + // thisObject.sidePanel.areas.push(thisObject.tradingSystemWorkspace) } function makeVisible () { - if (thisObject.investmentPlanWorkspace.isDeployed !== true) { - thisObject.investmentPlanWorkspace.deploydInvestmentPlan() + if (thisObject.tradingSystemWorkspace.isDeployed !== true) { + thisObject.tradingSystemWorkspace.deploydTradingSystem() } canvas.floatingSpace.makeVisible() visible = true @@ -46,8 +46,8 @@ function newStrategySpace () { function getContainer (point) { let container - if (thisObject.investmentPlanWorkspace !== undefined) { - container = thisObject.investmentPlanWorkspace.getContainer(point) + if (thisObject.tradingSystemWorkspace !== undefined) { + container = thisObject.tradingSystemWorkspace.getContainer(point) if (container !== undefined) { return container } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 38dbef787..2b1b8c920 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -44,7 +44,7 @@ function newStrategyCollectionItem () { function onMouseClick (event) { if (status === 'off') { canvas.floatingSpace.makeVisible() - thisObject.strategy = newInvestmentPlan() + thisObject.strategy = newTradingSystem() thisObject.strategy.initialize(thisObject.strategySource) status = 'on' } else { @@ -175,4 +175,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/TradingSystem.js similarity index 95% rename from StrategySpace/InvestmentPlan.js rename to StrategySpace/TradingSystem.js index 0eefe04e2..c06e3912c 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/TradingSystem.js @@ -1,9 +1,9 @@ -function newInvestmentPlan () { - const MODULE_NAME = 'Investment Plan' +function newTradingSystem () { + const MODULE_NAME = 'Trading System' let thisObject = { - investmentPlan: undefined, + tradingSystem: undefined, container: undefined, getContainer: getContainer, initialize: initialize, @@ -29,7 +29,7 @@ function newInvestmentPlan () { } function initialize (strategies) { - thisObject.investmentPlan = { + thisObject.tradingSystem = { strategies: strategies } generateStrategyParts() @@ -80,13 +80,13 @@ function newInvestmentPlan () { function generateStrategyParts () { let lastPhase - let investmentPlan = thisObject.investmentPlan + let tradingSystem = thisObject.tradingSystem - createPart('Investment Plan', '', investmentPlan, undefined, undefined) + createPart('Trading System', '', tradingSystem, undefined, undefined) - for (m = 0; m < investmentPlan.strategies.length; m++) { - let strategy = investmentPlan.strategies[m] - createPart('Strategy', strategy.name, strategy, investmentPlan, investmentPlan) + for (m = 0; m < tradingSystem.strategies.length; m++) { + let strategy = tradingSystem.strategies[m] + createPart('Strategy', strategy.name, strategy, tradingSystem, tradingSystem) createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { @@ -171,7 +171,7 @@ function newInvestmentPlan () { } function destroyStrategyParts () { - let strategy = thisObject.investmentPlan + let strategy = thisObject.tradingSystem destroyPart(strategy) destroyPart(strategy.entryPoint) diff --git a/StrategySpace/InvestmentPlanWorkspace.js b/StrategySpace/TradingSystemWorkspace.js similarity index 94% rename from StrategySpace/InvestmentPlanWorkspace.js rename to StrategySpace/TradingSystemWorkspace.js index d2ceaa8b9..a8ee995e4 100644 --- a/StrategySpace/InvestmentPlanWorkspace.js +++ b/StrategySpace/TradingSystemWorkspace.js @@ -1,6 +1,6 @@ -function newInvestmentPlanWorkspace () { - const MODULE_NAME = 'Investment Plan Workspace' +function newTradingSystemWorkspace () { + const MODULE_NAME = 'Trading System Workspace' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -9,7 +9,7 @@ function newInvestmentPlanWorkspace () { isDeployed: false, strategies: undefined, container: undefined, - deploydInvestmentPlan: deploydInvestmentPlan, + deploydTradingSystem: deploydTradingSystem, draw: draw, getContainer: getContainer, initialize: initialize @@ -122,8 +122,8 @@ function newInvestmentPlanWorkspace () { } } - function deploydInvestmentPlan () { - thisObject.strategy = newInvestmentPlan() + function deploydTradingSystem () { + thisObject.strategy = newTradingSystem() thisObject.strategy.initialize(thisObject.strategies) thisObject.isDeployed = true } From eb59fab26098fc2a9503083ce9c681c4d1005e41 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:26:19 +0200 Subject: [PATCH 127/143] Access to Strategy System only when logged in --- Globals.js | 2 +- Spaces/BottomSpace.js | 13 +++++++++++-- Spaces/StrategySpace.js | 3 ++- StrategySpace/TradingSystemWorkspace.js | 13 +++++++++---- 4 files changed, 23 insertions(+), 8 deletions(-) diff --git a/Globals.js b/Globals.js index 6e72065c2..79694da26 100644 --- a/Globals.js +++ b/Globals.js @@ -121,7 +121,7 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; - +const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5; diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 5e6ae3b05..3e03f4c77 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -60,6 +60,13 @@ thisObject.status = 'MIDDLE' + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + if (user !== null) { // Only if user is logged in + thisObject.container.isDraggeable = true + } else { + thisObject.container.isDraggeable = false + } + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT thisObject.status = 'BOTTOM' @@ -204,7 +211,10 @@ browserCanvasContext.closePath() browserCanvasContext.fill() - arrow() + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + if (user !== null) { // Only if user is logged in + arrow() + } } function arrow () { @@ -295,4 +305,3 @@ browserCanvasContext.stroke() } } - diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 0d4264972..86bc7b275 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -26,7 +26,8 @@ function newStrategySpace () { thisObject.tradingSystemWorkspace = newTradingSystemWorkspace() // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) - await thisObject.tradingSystemWorkspace.initialize() + thisObject.tradingSystemWorkspace.initialize() + await thisObject.tradingSystemWorkspace.loadFromStrategyzer() // thisObject.sidePanel.areas.push(thisObject.tradingSystemWorkspace) } diff --git a/StrategySpace/TradingSystemWorkspace.js b/StrategySpace/TradingSystemWorkspace.js index a8ee995e4..f5be5854a 100644 --- a/StrategySpace/TradingSystemWorkspace.js +++ b/StrategySpace/TradingSystemWorkspace.js @@ -9,6 +9,7 @@ function newTradingSystemWorkspace () { isDeployed: false, strategies: undefined, container: undefined, + loadFromStrategyzer: loadFromStrategyzer, deploydTradingSystem: deploydTradingSystem, draw: draw, getContainer: getContainer, @@ -33,10 +34,14 @@ function newTradingSystemWorkspace () { return thisObject async function initialize () { + + } + + async function loadFromStrategyzer () { try { const accessToken = window.localStorage.getItem('xaccess_token') - let user = window.localStorage.getItem('xuser') + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) if (user === null) { // if there is no user that means that we are logged off, which means this object can not be used. return @@ -100,7 +105,7 @@ function newTradingSystemWorkspace () { resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { - console.log('apolloClient error getting user strategies', error.graphQLErrors, error.stack) + if (ERROR_LOG === true) { logger.write('[ERROR] ApolloClient error getting user strategies -> err = ' + err.stack) } reject(error) }) }) @@ -115,10 +120,10 @@ function newTradingSystemWorkspace () { await Promise.all(fetchDataPromises).then(result => { }, err => { - console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err.stack) + if (ERROR_LOG === true) { logger.write('[ERROR] GraphQL Fetch Error -> err = ' + err.stack) } }) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> err = ' + err.stack) } } } From dcec3b93e0d6832856a3e2d9e4328f25c4672d62 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:30:27 +0200 Subject: [PATCH 128/143] just workpace --- Spaces/StrategySpace.js | 2 +- StrategySpace/{TradingSystemWorkspace.js => Workspace.js} | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename StrategySpace/{TradingSystemWorkspace.js => Workspace.js} (97%) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 86bc7b275..69aa27093 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -24,7 +24,7 @@ function newStrategySpace () { // thisObject.sidePanel = newSidePanel() // thisObject.sidePanel.initialize() - thisObject.tradingSystemWorkspace = newTradingSystemWorkspace() + thisObject.tradingSystemWorkspace = newWorkspace() // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) thisObject.tradingSystemWorkspace.initialize() await thisObject.tradingSystemWorkspace.loadFromStrategyzer() diff --git a/StrategySpace/TradingSystemWorkspace.js b/StrategySpace/Workspace.js similarity index 97% rename from StrategySpace/TradingSystemWorkspace.js rename to StrategySpace/Workspace.js index f5be5854a..11ede6092 100644 --- a/StrategySpace/TradingSystemWorkspace.js +++ b/StrategySpace/Workspace.js @@ -1,6 +1,6 @@ -function newTradingSystemWorkspace () { - const MODULE_NAME = 'Trading System Workspace' +function newWorkspace () { + const MODULE_NAME = 'Workspace' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME From ac83fa5f5a6266445ff6dab7272a1b938a6fd5a2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:44:18 +0200 Subject: [PATCH 129/143] protocol as name --- StrategySpace/TradingSystem.js | 11 +++++++---- StrategySpace/Workspace.js | 10 +++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index c06e3912c..9b8e38174 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -3,7 +3,7 @@ function newTradingSystem () { const MODULE_NAME = 'Trading System' let thisObject = { - tradingSystem: undefined, + protocolData: undefined, container: undefined, getContainer: getContainer, initialize: initialize, @@ -26,10 +26,13 @@ function newTradingSystem () { function finalize () { destroyStrategyParts() + thisObject.protocolData = undefined + thisObject.container.finalize() + thisObject.container = undefined } function initialize (strategies) { - thisObject.tradingSystem = { + thisObject.protocolData = { strategies: strategies } generateStrategyParts() @@ -80,7 +83,7 @@ function newTradingSystem () { function generateStrategyParts () { let lastPhase - let tradingSystem = thisObject.tradingSystem + let tradingSystem = thisObject.protocolData createPart('Trading System', '', tradingSystem, undefined, undefined) @@ -171,7 +174,7 @@ function newTradingSystem () { } function destroyStrategyParts () { - let strategy = thisObject.tradingSystem + let strategy = thisObject.protocolData destroyPart(strategy) destroyPart(strategy.entryPoint) diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 11ede6092..27ec027d2 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -63,7 +63,7 @@ function newWorkspace () { /* Getting the FB that own the Strategies */ - let strategySimulationClone = '' + let tradingSystemSimulationClone = '' let clones = window.localStorage.getItem('userClones') if (clones === null || clones === '') { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> no user clones found at local storage. Can not get Strategies without them. ') } @@ -73,7 +73,7 @@ function newWorkspace () { for (let i = 0; i < clones.length; i++) { let clone = clones[i] if (clone.botType === 'Indicator') { - strategySimulationClone = clone.botSlug + tradingSystemSimulationClone = clone.botSlug } } @@ -96,7 +96,7 @@ function newWorkspace () { return new Promise((resolve, reject) => { apolloClient.query({ query: GRAPHQL_QUERY_GET_STRATEGIES, - variables: { fbSlug: strategySimulationClone} + variables: { fbSlug: tradingSystemSimulationClone} }) .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) @@ -128,8 +128,8 @@ function newWorkspace () { } function deploydTradingSystem () { - thisObject.strategy = newTradingSystem() - thisObject.strategy.initialize(thisObject.strategies) + thisObject.tradingSystem = newTradingSystem() + thisObject.tradingSystem.initialize(thisObject.strategies) thisObject.isDeployed = true } From 716de14b9e9b62746c52c401da343d94a2463121 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 15:50:49 +0200 Subject: [PATCH 130/143] saving to strategizer part 1: creating the graphql query --- Spaces/StrategySpace.js | 20 ++-- StrategySpace/TradingSystem.js | 3 + StrategySpace/Workspace.js | 178 +++++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+), 10 deletions(-) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 69aa27093..c0a9dcad7 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -3,7 +3,7 @@ function newStrategySpace () { const MODULE_NAME = 'Strategy Space' let thisObject = { sidePanel: undefined, - tradingSystemWorkspace: undefined, + workplace: undefined, container: undefined, draw: draw, getContainer: getContainer, @@ -24,17 +24,17 @@ function newStrategySpace () { // thisObject.sidePanel = newSidePanel() // thisObject.sidePanel.initialize() - thisObject.tradingSystemWorkspace = newWorkspace() - // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) - thisObject.tradingSystemWorkspace.initialize() - await thisObject.tradingSystemWorkspace.loadFromStrategyzer() + thisObject.workplace = newWorkspace() + // thisObject.workplace.container.connectToParent(thisObject.sidePanel.container, true, true) + thisObject.workplace.initialize() + await thisObject.workplace.loadFromStrategyzer() - // thisObject.sidePanel.areas.push(thisObject.tradingSystemWorkspace) + // thisObject.sidePanel.areas.push(thisObject.workplace) } function makeVisible () { - if (thisObject.tradingSystemWorkspace.isDeployed !== true) { - thisObject.tradingSystemWorkspace.deploydTradingSystem() + if (thisObject.workplace.isDeployed !== true) { + thisObject.workplace.deploydTradingSystem() } canvas.floatingSpace.makeVisible() visible = true @@ -47,8 +47,8 @@ function newStrategySpace () { function getContainer (point) { let container - if (thisObject.tradingSystemWorkspace !== undefined) { - container = thisObject.tradingSystemWorkspace.getContainer(point) + if (thisObject.workplace !== undefined) { + container = thisObject.workplace.getContainer(point) if (container !== undefined) { return container } } diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index 9b8e38174..aaae4beb6 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -245,6 +245,9 @@ function newTradingSystem () { function onMenuItemClick (payload, action) { switch (action) { + case 'Save Trading System': + canvas.strategySpace.workplace.saveToStrategyzer() + break case 'Open Settings': break diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 27ec027d2..ef566381f 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -9,7 +9,9 @@ function newWorkspace () { isDeployed: false, strategies: undefined, container: undefined, + tradingSystem: undefined, loadFromStrategyzer: loadFromStrategyzer, + saveToStrategyzer: saveToStrategyzer, deploydTradingSystem: deploydTradingSystem, draw: draw, getContainer: getContainer, @@ -37,6 +39,182 @@ function newWorkspace () { } + function saveToStrategyzer () { + let graphQL_Mutation = '' + + graphQL_Mutation = graphQL_Mutation + 'strategy: { ' + graphQL_Mutation = graphQL_Mutation + 'subStrategies: [ ' + + for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { + let strategy = thisObject.tradingSystem.protocolData.strategies[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'active: true ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + strategy.name + '" ' + + graphQL_Mutation = graphQL_Mutation + 'entryPoint: { ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'exitPoint: { ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'sellPoint: { ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'stopLoss: { ' + graphQL_Mutation = graphQL_Mutation + 'phases: [ ' + + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'buyOrder: { ' + graphQL_Mutation = graphQL_Mutation + 'phases: [ ' + + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + console.log(graphQL_Mutation) + } + async function loadFromStrategyzer () { try { const accessToken = window.localStorage.getItem('xaccess_token') From 5c89cf1aac6e0a48298a32f11a6508b029817c5f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 16:37:32 +0200 Subject: [PATCH 131/143] Getting the Id of the FB for the update query --- Globals.js | 2 + StrategySpace/ConstGetStrategies.js | 1 + StrategySpace/ConstUpdateStrategy.js | 85 --------------------- StrategySpace/TradingSystem.js | 5 +- StrategySpace/Workspace.js | 106 ++++++++++++++++++++++++--- 5 files changed, 101 insertions(+), 98 deletions(-) diff --git a/Globals.js b/Globals.js index 79694da26..7d348fbc5 100644 --- a/Globals.js +++ b/Globals.js @@ -122,6 +122,8 @@ window.AT_BREAKPOINT = false; const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" + const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5; diff --git a/StrategySpace/ConstGetStrategies.js b/StrategySpace/ConstGetStrategies.js index 46acca721..cbecf4f9e 100644 --- a/StrategySpace/ConstGetStrategies.js +++ b/StrategySpace/ConstGetStrategies.js @@ -2,6 +2,7 @@ const GRAPHQL_QUERY_GET_STRATEGIES = Apollo.gql` query($fbSlug: String!){ strategizer_StrategyByFb(fbSlug: $fbSlug){ + id subStrategies(activeOnly: true){ name entryPoint{ diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js index 72be45218..e69de29bb 100644 --- a/StrategySpace/ConstUpdateStrategy.js +++ b/StrategySpace/ConstUpdateStrategy.js @@ -1,85 +0,0 @@ -const GRAPHQL_MUTATION_UPDATE_STRATEGY = Apollo.gql` - query($fbSlug: String!){ - - strategizer_StrategyByFb(fbSlug: $fbSlug){ - subStrategies(activeOnly: true){ - name - entryPoint{ - situations{ - name - conditions{ - name - code - } - } - } - exitPoint{ - situations{ - name - conditions{ - name - code - } - } - } - sellPoint{ - situations{ - name - conditions{ - name - code - } - } - } - buyPoint{ - situations{ - name - conditions{ - name - code - } - } - } - stopLoss{ - phases{ - name - code - situations{ - name - conditions{ - name - code - } - } - } - } - buyOrder{ - phases{ - name - code - situations{ - name - conditions{ - name - code - } - } - } - } - sellOrder{ - phases{ - name - code - situations{ - name - conditions{ - name - code - } - } - } - } - } - } - } - ` diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index aaae4beb6..ddf329f24 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -31,9 +31,10 @@ function newTradingSystem () { thisObject.container = undefined } - function initialize (strategies) { + function initialize (protocolData) { thisObject.protocolData = { - strategies: strategies + id: protocolData.id, + strategies: protocolData.subStrategies } generateStrategyParts() } diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index ef566381f..7573ff923 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -7,7 +7,7 @@ function newWorkspace () { let thisObject = { isDeployed: false, - strategies: undefined, + strategizerData: undefined, container: undefined, tradingSystem: undefined, loadFromStrategyzer: loadFromStrategyzer, @@ -35,13 +35,91 @@ function newWorkspace () { return thisObject - async function initialize () { + function initialize () { } - function saveToStrategyzer () { + async function saveToStrategyzer () { + const GRAPHQL_MUTATION_UPDATE_STRATEGIES = buildUpdateGraphQlQuery() + + try { + const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) + + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + if (user === null) { + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> Can not save because user is not logged in. ') } + return + } + + user = JSON.parse(user) + + const authId = user.authId + + const apolloClient = new Apollo.lib.ApolloClient({ + networkInterface: Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl, + transportBatching: true + }), + connectToDevTools: true + }) + + /* Updating all Strategies */ + + const networkInterface = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + networkInterface.use([{ + applyMiddleware (req, next) { + req.options.headers = { + authorization: `Bearer ${accessToken}` + } + next() + } + }]) + + const getStrategies = () => { + return new Promise((resolve, reject) => { + apolloClient.query({ + query: GRAPHQL_QUERY_GET_STRATEGIES, + variables: { fbSlug: tradingSystemSimulationClone} + }) + .then(response => { + window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) + thisObject.strategizerData = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) + + resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) + }) + .catch(error => { + if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } + reject(error) + }) + }) + } + + // To avoid race conditions, add asynchronous fetches to array + let fetchDataPromises = [] + + fetchDataPromises.push(getStrategies()) + + // When all asynchronous fetches resolve, authenticate user or throw error. + await Promise.all(fetchDataPromises).then(result => { + + }, err => { + if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } + }) + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> err = ' + err.stack) } + } + } + + function buildUpdateGraphQlQuery () { let graphQL_Mutation = '' + graphQL_Mutation = graphQL_Mutation + 'mutation { ' + graphQL_Mutation = graphQL_Mutation + 'strategizer_EditStrategy( ' + graphQL_Mutation = graphQL_Mutation + 'id: "sdfs" ' + graphQL_Mutation = graphQL_Mutation + 'strategy: { ' graphQL_Mutation = graphQL_Mutation + 'subStrategies: [ ' @@ -212,12 +290,18 @@ function newWorkspace () { graphQL_Mutation = graphQL_Mutation + '] ' graphQL_Mutation = graphQL_Mutation + '} ' - console.log(graphQL_Mutation) + graphQL_Mutation = graphQL_Mutation + ') ' + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'id ' + graphQL_Mutation = graphQL_Mutation + '} ' + graphQL_Mutation = graphQL_Mutation + '} ' + + return graphQL_Mutation } async function loadFromStrategyzer () { try { - const accessToken = window.localStorage.getItem('xaccess_token') + const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) if (user === null) { @@ -244,7 +328,7 @@ function newWorkspace () { let tradingSystemSimulationClone = '' let clones = window.localStorage.getItem('userClones') if (clones === null || clones === '') { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> no user clones found at local storage. Can not get Strategies without them. ') } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> no user clones found at local storage. Can not get Strategies without them. ') } return } clones = JSON.parse(clones) @@ -277,13 +361,13 @@ function newWorkspace () { variables: { fbSlug: tradingSystemSimulationClone} }) .then(response => { - window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) + window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb)) + thisObject.strategizerData = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb)) resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { - if (ERROR_LOG === true) { logger.write('[ERROR] ApolloClient error getting user strategies -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } reject(error) }) }) @@ -298,7 +382,7 @@ function newWorkspace () { await Promise.all(fetchDataPromises).then(result => { }, err => { - if (ERROR_LOG === true) { logger.write('[ERROR] GraphQL Fetch Error -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } }) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> err = ' + err.stack) } @@ -307,7 +391,7 @@ function newWorkspace () { function deploydTradingSystem () { thisObject.tradingSystem = newTradingSystem() - thisObject.tradingSystem.initialize(thisObject.strategies) + thisObject.tradingSystem.initialize(thisObject.strategizerData) thisObject.isDeployed = true } From ee556b659ed7fe373a384a3a65f86ad555870df7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 18:00:24 +0200 Subject: [PATCH 132/143] saving prevented by circular references --- StrategySpace/ConstUpdateStrategy.js | 7 ++++++ StrategySpace/TradingSystem.js | 5 ++-- StrategySpace/Workspace.js | 37 ++++++++++++++-------------- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js index e69de29bb..d84ce30cf 100644 --- a/StrategySpace/ConstUpdateStrategy.js +++ b/StrategySpace/ConstUpdateStrategy.js @@ -0,0 +1,7 @@ +const GRAPHQL_MUTATION_UPDATE_STRATEGIES = Apollo.gql` + mutation strategizer_EditStrategy($id: ID!, $strategy: strategizer_StrategyInput!) { + strategizer_EditStrategy(id: $id, strategy: $strategy) { + id + } + } +` diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index ddf329f24..6befa1852 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -244,10 +244,11 @@ function newTradingSystem () { } } - function onMenuItemClick (payload, action) { + async function onMenuItemClick (payload, action) { switch (action) { case 'Save Trading System': - canvas.strategySpace.workplace.saveToStrategyzer() + let wasSaved + await canvas.strategySpace.workplace.saveToStrategyzer() break case 'Open Settings': diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 7573ff923..58662075d 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -40,8 +40,6 @@ function newWorkspace () { } async function saveToStrategyzer () { - const GRAPHQL_MUTATION_UPDATE_STRATEGIES = buildUpdateGraphQlQuery() - try { const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) @@ -78,21 +76,22 @@ function newWorkspace () { } }]) - const getStrategies = () => { + const updateStrategies = () => { return new Promise((resolve, reject) => { - apolloClient.query({ - query: GRAPHQL_QUERY_GET_STRATEGIES, - variables: { fbSlug: tradingSystemSimulationClone} + apolloClient.mutate({ + mutation: GRAPHQL_MUTATION_UPDATE_STRATEGIES, + variables: { + id: thisObject.strategizerData.id, + strategy: thisObject.strategizerData + } }) .then(response => { - window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - thisObject.strategizerData = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - - resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) + console.log('FUNCO!!') + resolve(true) }) - .catch(error => { - if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } - reject(error) + .catch(err => { + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } + reject(err) }) }) } @@ -100,16 +99,16 @@ function newWorkspace () { // To avoid race conditions, add asynchronous fetches to array let fetchDataPromises = [] - fetchDataPromises.push(getStrategies()) + fetchDataPromises.push(updateStrategies()) // When all asynchronous fetches resolve, authenticate user or throw error. await Promise.all(fetchDataPromises).then(result => { - + console.log('parece que anda??') }, err => { - if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } }) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> err = ' + err.stack) } } } @@ -366,9 +365,9 @@ function newWorkspace () { resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) - .catch(error => { + .catch(err => { if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } - reject(error) + reject(err) }) }) } From 753e1066996dcb02a69078b0f7c77061585d5be6 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 20:09:57 +0200 Subject: [PATCH 133/143] Saving the Strategies to Strategizer! --- StrategySpace/Workspace.js | 317 ++++++++++++++++--------------------- 1 file changed, 139 insertions(+), 178 deletions(-) diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 58662075d..1f34ecd5a 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -76,13 +76,15 @@ function newWorkspace () { } }]) + let dataToSave = buildGraphQLDataToSave() + const updateStrategies = () => { return new Promise((resolve, reject) => { apolloClient.mutate({ mutation: GRAPHQL_MUTATION_UPDATE_STRATEGIES, variables: { id: thisObject.strategizerData.id, - strategy: thisObject.strategizerData + strategy: dataToSave.strategy } }) .then(response => { @@ -112,190 +114,149 @@ function newWorkspace () { } } - function buildUpdateGraphQlQuery () { + function buildGraphQLDataToSave () { let graphQL_Mutation = '' - graphQL_Mutation = graphQL_Mutation + 'mutation { ' - graphQL_Mutation = graphQL_Mutation + 'strategizer_EditStrategy( ' - graphQL_Mutation = graphQL_Mutation + 'id: "sdfs" ' - - graphQL_Mutation = graphQL_Mutation + 'strategy: { ' - graphQL_Mutation = graphQL_Mutation + 'subStrategies: [ ' - - for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { - let strategy = thisObject.tradingSystem.protocolData.strategies[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'active: true ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + strategy.name + '" ' - - graphQL_Mutation = graphQL_Mutation + 'entryPoint: { ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' + let dataToSave = { + strategy: { + subStrategies: [] } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'exitPoint: { ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'sellPoint: { ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'stopLoss: { ' - graphQL_Mutation = graphQL_Mutation + 'phases: [ ' - - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'buyOrder: { ' - graphQL_Mutation = graphQL_Mutation + 'phases: [ ' - - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + '} ' } - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' + for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { + let workspaceStrategy = thisObject.tradingSystem.protocolData.strategies[m] + let strategy = { + entryPoint: { + situations: [] + }, + exitPoint: { + situations: [] + }, + sellPoint: { + situations: [] + }, + stopLoss: { + phases: [] + }, + buyOrder: { + phases: [] + } + } - graphQL_Mutation = graphQL_Mutation + ') ' - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'id ' - graphQL_Mutation = graphQL_Mutation + '} ' - graphQL_Mutation = graphQL_Mutation + '} ' + for (let k = 0; k < workspaceStrategy.entryPoint.situations.length; k++) { + let workspaceSituation = workspaceStrategy.entryPoint.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } - return graphQL_Mutation + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + strategy.entryPoint.situations.push(situation) + } + + for (let k = 0; k < workspaceStrategy.exitPoint.situations.length; k++) { + let workspaceSituation = workspaceStrategy.exitPoint.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + strategy.exitPoint.situations.push(situation) + } + + for (let k = 0; k < workspaceStrategy.sellPoint.situations.length; k++) { + let workspaceSituation = workspaceStrategy.sellPoint.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + strategy.sellPoint.situations.push(situation) + } + + for (let p = 0; p < workspaceStrategy.stopLoss.phases.length; p++) { + let workspacePhase = workspaceStrategy.stopLoss.phases[p] + let phase = { + name: workspacePhase.name, + code: workspacePhase.code, + situations: [] + } + + for (let k = 0; k < workspacePhase.situations.length; k++) { + let workspaceSituation = workspacePhase.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + phase.situations.push(situation) + } + strategy.stopLoss.phases.push(phase) + } + + for (let p = 0; p < workspaceStrategy.buyOrder.phases.length; p++) { + let workspacePhase = workspaceStrategy.buyOrder.phases[p] + let phase = { + name: workspacePhase.name, + code: workspacePhase.code, + situations: [] + } + + for (let k = 0; k < workspacePhase.situations.length; k++) { + let workspaceSituation = workspacePhase.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + phase.situations.push(situation) + } + strategy.buyOrder.phases.push(phase) + } + dataToSave.strategy.subStrategies.push(strategy) + } + + console.log(dataToSave) + return dataToSave } async function loadFromStrategyzer () { From 665062d4da45b75822d911a84061c9275a00f6a2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 08:49:30 +0200 Subject: [PATCH 134/143] strategy name was missing --- StrategySpace/Workspace.js | 1 + 1 file changed, 1 insertion(+) diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 1f34ecd5a..03415be42 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -126,6 +126,7 @@ function newWorkspace () { for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { let workspaceStrategy = thisObject.tradingSystem.protocolData.strategies[m] let strategy = { + name: workspaceStrategy.name, entryPoint: { situations: [] }, From 308f564509e2db5c9f0a43f112cd0d36ec4f19b0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 08:57:54 +0200 Subject: [PATCH 135/143] considering active property of strategies --- StrategySpace/ConstGetStrategies.js | 1 + StrategySpace/Workspace.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/StrategySpace/ConstGetStrategies.js b/StrategySpace/ConstGetStrategies.js index cbecf4f9e..aa77d1d5c 100644 --- a/StrategySpace/ConstGetStrategies.js +++ b/StrategySpace/ConstGetStrategies.js @@ -5,6 +5,7 @@ const GRAPHQL_QUERY_GET_STRATEGIES = Apollo.gql` id subStrategies(activeOnly: true){ name + active entryPoint{ situations{ name diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 03415be42..b70472015 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -88,7 +88,7 @@ function newWorkspace () { } }) .then(response => { - console.log('FUNCO!!') + console.log('Strategies Saved') resolve(true) }) .catch(err => { @@ -105,7 +105,7 @@ function newWorkspace () { // When all asynchronous fetches resolve, authenticate user or throw error. await Promise.all(fetchDataPromises).then(result => { - console.log('parece que anda??') + }, err => { if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } }) @@ -127,6 +127,7 @@ function newWorkspace () { let workspaceStrategy = thisObject.tradingSystem.protocolData.strategies[m] let strategy = { name: workspaceStrategy.name, + active: workspaceStrategy.active, entryPoint: { situations: [] }, From 8f478c5ca30ce56b337e7976700736ffa2abe37c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 10:14:50 +0200 Subject: [PATCH 136/143] Saving working with states shown at manu item --- FloatingSpace/CircularMenuItem.js | 38 +++++++++++++++++++++++++++---- StrategySpace/TradingSystem.js | 9 +++++--- StrategySpace/Workspace.js | 10 +------- 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index b22524258..f1ee11bf3 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -42,6 +42,11 @@ function newCircularMenuItem () { let selfMouseOverEventSubscriptionId let selfMouseClickEventSubscriptionId let selfMouseNotOverEventSubscriptionId + + let labelToPrint = '' + let defaultBackgroudColor = UI_COLOR.RED + let backgroundColorToUse = UI_COLOR.RED + let temporaryStatus = 0 return thisObject function finalize () { @@ -103,6 +108,15 @@ function newCircularMenuItem () { thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5 thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2 + + temporaryStatus-- + if (temporaryStatus < 0) { + temporaryStatus = 0 + } + if (temporaryStatus === 0) { + labelToPrint = thisObject.label + backgroundColorToUse = defaultBackgroudColor + } } function onMouseOver (point) { @@ -117,8 +131,21 @@ function newCircularMenuItem () { isMouseOver = false } - function onMouseClick (event) { - thisObject.actionFunction(thisObject.payload, thisObject.action) + async function onMouseClick (event) { + if (temporaryStatus === 0) { + setTemporaryStatus('Saving...', UI_COLOR.GREY) + await thisObject.actionFunction(thisObject.payload, thisObject.action).then(result => { + setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE) + }, err => { + setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW) + }) + } + } + + function setTemporaryStatus (text, backgroundColor) { + labelToPrint = text + backgroundColorToUse = backgroundColor + temporaryStatus = 500 } function drawBackground () { @@ -128,7 +155,7 @@ function newCircularMenuItem () { lineWidth: 0.1, container: thisObject.container, borderColor: UI_COLOR.DARK, - backgroundColor: UI_COLOR.RED, + backgroundColor: backgroundColorToUse, castShadow: false } @@ -162,7 +189,7 @@ function newCircularMenuItem () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - if (thisObject.label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) { + if (thisObject.currentRadius >= thisObject.targetRadius) { labelPoint = { x: menuPosition.x + thisObject.currentRadius + 10, y: menuPosition.y + fontSize * FONT_ASPECT_RATIO @@ -170,8 +197,9 @@ function newCircularMenuItem () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fillText(thisObject.label, labelPoint.x, labelPoint.y) + browserCanvasContext.fillText(labelToPrint, labelPoint.x, labelPoint.y) } } } } + diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index 6befa1852..c2d3fd060 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -247,9 +247,12 @@ function newTradingSystem () { async function onMenuItemClick (payload, action) { switch (action) { case 'Save Trading System': - let wasSaved - await canvas.strategySpace.workplace.saveToStrategyzer() - break + { + await canvas.strategySpace.workplace.saveToStrategyzer() + + break + } + case 'Open Settings': break diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index b70472015..ea534794d 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -88,7 +88,6 @@ function newWorkspace () { } }) .then(response => { - console.log('Strategies Saved') resolve(true) }) .catch(err => { @@ -98,17 +97,11 @@ function newWorkspace () { }) } - // To avoid race conditions, add asynchronous fetches to array let fetchDataPromises = [] fetchDataPromises.push(updateStrategies()) - // When all asynchronous fetches resolve, authenticate user or throw error. - await Promise.all(fetchDataPromises).then(result => { - - }, err => { - if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } - }) + await Promise.all(fetchDataPromises) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> err = ' + err.stack) } } @@ -257,7 +250,6 @@ function newWorkspace () { dataToSave.strategy.subStrategies.push(strategy) } - console.log(dataToSave) return dataToSave } From 92bad2738bba773222ecf2bcb8718ea0a83fa7dc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 11:59:29 +0200 Subject: [PATCH 137/143] Improvement on asyc calls --- FloatingSpace/CircularMenuItem.js | 19 ++++++++++--------- StrategySpace/TradingSystem.js | 4 ++-- StrategySpace/Workspace.js | 6 ++---- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index f1ee11bf3..8c21ac556 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -133,19 +133,21 @@ function newCircularMenuItem () { async function onMouseClick (event) { if (temporaryStatus === 0) { - setTemporaryStatus('Saving...', UI_COLOR.GREY) - await thisObject.actionFunction(thisObject.payload, thisObject.action).then(result => { - setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE) - }, err => { - setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW) - }) + setTemporaryStatus('Saving...', UI_COLOR.GREY, 500) + let result = await thisObject.actionFunction(thisObject.payload, thisObject.action) + + if (result === true) { + setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE, 250) + } else { + setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW, 500) + } } } - function setTemporaryStatus (text, backgroundColor) { + function setTemporaryStatus (text, backgroundColor, waitingCycles) { labelToPrint = text backgroundColorToUse = backgroundColor - temporaryStatus = 500 + temporaryStatus = waitingCycles } function drawBackground () { @@ -202,4 +204,3 @@ function newCircularMenuItem () { } } } - diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index c2d3fd060..e4d3f6775 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -248,8 +248,8 @@ function newTradingSystem () { switch (action) { case 'Save Trading System': { - await canvas.strategySpace.workplace.saveToStrategyzer() - + let result = await canvas.strategySpace.workplace.saveToStrategyzer() + return result break } diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index ea534794d..d03cf2b35 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -97,11 +97,9 @@ function newWorkspace () { }) } - let fetchDataPromises = [] + let result = await updateStrategies() - fetchDataPromises.push(updateStrategies()) - - await Promise.all(fetchDataPromises) + return result } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> err = ' + err.stack) } } From b66e8cd41d6c0c51f8f588e4cd839b4a89a4b20b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 12:13:43 +0200 Subject: [PATCH 138/143] Temporary Labels can be parametrized now --- FloatingSpace/CircularMenu.js | 3 +++ FloatingSpace/CircularMenuItem.js | 16 +++++++++++++--- FloatingSpace/StrategyPart.js | 4 +++- StrategySpace/TradingSystem.js | 1 - 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index b623c7c34..97edde860 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -53,6 +53,9 @@ function newCircularMenu () { menuItem.action = menuItemInitialValue.action menuItem.actionFunction = menuItemInitialValue.actionFunction menuItem.label = menuItemInitialValue.label + menuItem.workingLabel = menuItemInitialValue.workingLabel + menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel + menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel menuItem.visible = menuItemInitialValue.visible menuItem.imagePathOn = menuItemInitialValue.imagePathOn menuItem.imagePathOff = menuItemInitialValue.imagePathOff diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 8c21ac556..4aef13239 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -9,6 +9,9 @@ function newCircularMenuItem () { action: undefined, actionFunction: undefined, label: undefined, + workingLabel: undefined, + workDoneLabel: undefined, + workFailedLabel: undefined, visible: false, imagePathOn: undefined, imagePathOff: undefined, @@ -133,13 +136,20 @@ function newCircularMenuItem () { async function onMouseClick (event) { if (temporaryStatus === 0) { - setTemporaryStatus('Saving...', UI_COLOR.GREY, 500) + if (thisObject.workingLabel !== undefined) { + setTemporaryStatus(thisObject.workingLabel, UI_COLOR.GREY, 500) + } + let result = await thisObject.actionFunction(thisObject.payload, thisObject.action) if (result === true) { - setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE, 250) + if (thisObject.workDoneLabel !== undefined) { + setTemporaryStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250) + } } else { - setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW, 500) + if (thisObject.workFailedLabel != undefined) { + setTemporaryStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 500) + } } } } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 41cd9e751..6417fb09e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -91,6 +91,9 @@ function newStrategyPart () { action: 'Save Trading System', actionFunction: thisObject.payload.onMenuItemClick, label: 'Save Changes', + workingLabel: 'Saving...', + workDoneLabel: 'Saved', + workFailedLabel: 'Not Saved', visible: false, imagePathOn: 'Images/icons/style-01/upload.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -654,4 +657,3 @@ function newStrategyPart () { } } } - diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index e4d3f6775..9cd76e864 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -254,7 +254,6 @@ function newTradingSystem () { } case 'Open Settings': - break case 'Delete Strategy': From c0d3ba174b1cfe30d0e3f16caca67066ff3d6191 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 14:13:55 +0200 Subject: [PATCH 139/143] Ready to deployd in develop --- Globals.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Globals.js b/Globals.js index 7d348fbc5..d3b973c71 100644 --- a/Globals.js +++ b/Globals.js @@ -19,7 +19,7 @@ UI_COLOR = { DARK: "48, 48, 54", LIGHT: "234, 226, 222", GREY: "150, 150, 150", - LIGHT_GREY: "247, 247, 247", + LIGHT_GREY: "247, 247, 247", WHITE: "255, 255, 255", BLACK: "0, 0, 0", GOLDEN_ORANGE: "240, 162, 2", @@ -121,8 +121,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" +const LOGGED_IN_USER_LOCAL_STORAGE = "user" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "access_token" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. @@ -167,7 +167,7 @@ const BOTTOM_SPACE_HEIGHT = 35; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT - + const PRODUCT_CARD_STATUS = { ON: 'on', LOADING: 'loading', From ca54f8635cd054673ff4943baefa1c68f2d221a8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 15:08:50 +0200 Subject: [PATCH 140/143] Putting the red lines inside the bottom space --- Globals.js | 2 +- Spaces/BottomSpace.js | 5 +++-- Spaces/FloatingSpace.js | 10 +++------- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/Globals.js b/Globals.js index d3b973c71..77d9ed28c 100644 --- a/Globals.js +++ b/Globals.js @@ -163,7 +163,7 @@ const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; -const BOTTOM_SPACE_HEIGHT = 35; +const BOTTOM_SPACE_HEIGHT = 40; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 3e03f4c77..3bee0df9d 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -200,13 +200,13 @@ browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -305,3 +305,4 @@ browserCanvasContext.stroke() } } + diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index d160d6bc8..32752e594 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -66,8 +66,6 @@ function newFloatingSpace () { function fitIntoVisibleArea (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - const RED_LINE = 5 - let returnPoint = { x: point.x, y: point.y @@ -81,8 +79,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT } if (point.y > browserCanvas.height) { @@ -93,8 +91,6 @@ function newFloatingSpace () { } function isThisPointVisible (point) { - const RED_LINE = 5 - if (point.x > browserCanvas.width) { return false } @@ -103,7 +99,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { return false } From 11c479594e739ba36e55a20b59c48a3adcb27276 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 15:14:14 +0200 Subject: [PATCH 141/143] Top Space to the front in relation with Bottom space --- Canvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Canvas.js b/Canvas.js index e8543455c..970b151fb 100644 --- a/Canvas.js +++ b/Canvas.js @@ -174,9 +174,9 @@ function newCanvas () { animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) animation.start(onStart) From ef06f7bc8b0291c8ab955d56a8c659e62b171744 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 15:56:24 +0200 Subject: [PATCH 142/143] Reorganization to clean strategyPart object --- FloatingSpace/StrategyPart.js | 292 +--------------------- FloatingSpace/StrategyPartConstructor.js | 305 ++++++++++++++++++++++- Globals.js | 4 +- 3 files changed, 305 insertions(+), 296 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6417fb09e..3bd8d5f24 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -67,295 +67,9 @@ function newStrategyPart () { imagePath = undefined } - function initialize (payload) { + function initialize (payload, menuItemsInitialValues) { thisObject.payload = payload - let menuItemsInitialValues = [] - switch (thisObject.payload.node.type) { - case 'Trading System': { - imagePath = 'Images/icons/style-01/analysis.png' - menuItemsInitialValues = [ - { - action: 'Reload Trading System', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Reload', - visible: false, - imagePathOn: 'Images/icons/style-01/vector.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -60 - }, - { - action: 'Save Trading System', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Save Changes', - workingLabel: 'Saving...', - workDoneLabel: 'Saved', - workFailedLabel: 'Not Saved', - visible: false, - imagePathOn: 'Images/icons/style-01/upload.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { - action: 'New Strategy', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'New Strategy', - visible: false, - imagePathOn: 'Images/icons/style-01/quality.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }, - { - action: 'Open Settings', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Settings', - visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 60 - }] - break - } - case 'Strategy': { - imagePath = 'Images/icons/style-01/quality.png' - menuItemsInitialValues = [ - { - action: 'Delete Strategy', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Strategy', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { - action: 'Open Settings', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Settings', - visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }] - break - } - case 'Strategy Entry Event': { - imagePath = 'Images/icons/style-01/startup.png' - menuItemsInitialValues = [ - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Strategy Exit Event': { - imagePath = 'Images/icons/style-01/support.png' - menuItemsInitialValues = [ - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Trade Entry Event': { - imagePath = 'Images/icons/style-01/compass.png' - menuItemsInitialValues = [ - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Stop': { - imagePath = 'Images/icons/style-01/pixel.png' - menuItemsInitialValues = [ - { - action: 'Add Phase', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Phase', - visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Take Profit': { - imagePath = 'Images/icons/style-01/competition.png' - menuItemsInitialValues = [ - { - action: 'Add Phase', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Phase', - visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Phase': { - imagePath = 'Images/icons/style-01/testing.png' - thisObject.codeEditor = newCodeEditor() - thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction - thisObject.codeEditor.initialize() - thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) - - imagePath = 'Images/icons/style-01/placeholder.png' - menuItemsInitialValues = [ - { - action: 'Edit Code', - actionFunction: thisObject.codeEditor.activate, - label: 'Edit Code', - visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 40 - }, - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }, - { - action: 'Delete Phase', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Phase', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -40 - }] - break - } - case 'Situation': { - imagePath = 'Images/icons/style-01/attractive.png' - menuItemsInitialValues = [ - { - action: 'Add Condition', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Condition', - visible: false, - imagePathOn: 'Images/icons/style-01/testing.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }, - { - action: 'Delete Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }] - break - } - case 'Condition': { - imagePath = 'Images/icons/style-01/testing.png' - thisObject.codeEditor = newCodeEditor() - thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction - thisObject.codeEditor.initialize() - thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) - menuItemsInitialValues = [ - { - action: 'Edit Code', - actionFunction: thisObject.codeEditor.activate, - label: 'Edit Code', - visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }, - { - action: 'Delete Condition', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Condition', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }] - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + thisObject.payload.node.type) } - } - } - /* Initialize the Menu */ thisObject.menu = newCircularMenu() @@ -371,14 +85,14 @@ function newStrategyPart () { /* Load Part Image */ - if (imagePath !== undefined) { + if (thisObject.imagePath !== undefined) { image = new Image() image.onload = onImageLoad function onImageLoad () { image.canDrawIcon = true } - image.src = window.canvasApp.urlPrefix + imagePath + image.src = window.canvasApp.urlPrefix + thisObject.imagePath } selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 662c806b2..1a46ff08f 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -39,10 +39,309 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.isVisibleFunction = canvas.floatingSpace.isThisPointVisible - strategyPart.initialize(payload) + let menuItemsInitialValues = getMenuItemsInitialValues(strategyPart, payload) + strategyPart.initialize(payload, menuItemsInitialValues) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart + setFloatingObjectBasicProperties(floatingObject, payload) + + floatingLayer.addFloatingObject(floatingObject) + + return + } + + function getMenuItemsInitialValues (strategyPart, payload) { + let menuItemsInitialValues = [] + switch (payload.node.type) { + case 'Trading System': { + strategyPart.imagePath = 'Images/icons/style-01/analysis.png' + menuItemsInitialValues = [ + { + action: 'Reload Trading System', + actionFunction: payload.onMenuItemClick, + label: 'Reload', + visible: false, + imagePathOn: 'Images/icons/style-01/vector.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -60 + }, + { + action: 'Save Trading System', + actionFunction: payload.onMenuItemClick, + label: 'Save Changes', + workingLabel: 'Saving...', + workDoneLabel: 'Saved', + workFailedLabel: 'Not Saved', + visible: false, + imagePathOn: 'Images/icons/style-01/upload.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + action: 'New Strategy', + actionFunction: payload.onMenuItemClick, + label: 'New Strategy', + visible: false, + imagePathOn: 'Images/icons/style-01/quality.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }, + { + action: 'Open Settings', + actionFunction: payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] + break + } + case 'Strategy': { + strategyPart.imagePath = 'Images/icons/style-01/quality.png' + menuItemsInitialValues = [ + { + action: 'Delete Strategy', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Strategy', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + action: 'Open Settings', + actionFunction: payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }] + break + } + case 'Strategy Entry Event': { + strategyPart.imagePath = 'Images/icons/style-01/startup.png' + menuItemsInitialValues = [ + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Strategy Exit Event': { + strategyPart.imagePath = 'Images/icons/style-01/support.png' + menuItemsInitialValues = [ + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Trade Entry Event': { + strategyPart.imagePath = 'Images/icons/style-01/compass.png' + menuItemsInitialValues = [ + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Stop': { + strategyPart.imagePath = 'Images/icons/style-01/pixel.png' + menuItemsInitialValues = [ + { + action: 'Add Phase', + actionFunction: payload.onMenuItemClick, + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Take Profit': { + strategyPart.imagePath = 'Images/icons/style-01/competition.png' + menuItemsInitialValues = [ + { + action: 'Add Phase', + actionFunction: payload.onMenuItemClick, + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Phase': { + strategyPart.imagePath = 'Images/icons/style-01/placeholder.png' + strategyPart.codeEditor = newCodeEditor() + strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction + strategyPart.codeEditor.initialize() + strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) + + menuItemsInitialValues = [ + { + action: 'Edit Code', + actionFunction: strategyPart.codeEditor.activate, + label: 'Edit Code', + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 40 + }, + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }, + { + action: 'Delete Phase', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -40 + }] + break + } + case 'Situation': { + strategyPart.imagePath = 'Images/icons/style-01/attractive.png' + menuItemsInitialValues = [ + { + action: 'Add Condition', + actionFunction: payload.onMenuItemClick, + label: 'Add Condition', + visible: false, + imagePathOn: 'Images/icons/style-01/testing.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }, + { + action: 'Delete Situation', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }] + break + } + case 'Condition': { + strategyPart.imagePath = 'Images/icons/style-01/testing.png' + strategyPart.codeEditor = newCodeEditor() + strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction + strategyPart.codeEditor.initialize() + strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) + + menuItemsInitialValues = [ + { + action: 'Edit Code', + actionFunction: strategyPart.codeEditor.activate, + label: 'Edit Code', + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }, + { + action: 'Delete Condition', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Condition', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }] + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] getMenuItemsInitialValues -> Part Type not Recognized -> type = ' + payload.node.type) } + } + } + + return menuItemsInitialValues + } + + function setFloatingObjectBasicProperties (floatingObject, payload) { const FRICTION = 0.97 switch (payload.node.type) { @@ -163,10 +462,6 @@ function newStrategyPartConstructor () { } floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - floatingLayer.addFloatingObject(floatingObject) - - return } function destroyStrategyPart (payload) { diff --git a/Globals.js b/Globals.js index 77d9ed28c..039d5dbcd 100644 --- a/Globals.js +++ b/Globals.js @@ -121,8 +121,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const LOGGED_IN_USER_LOCAL_STORAGE = "user" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "access_token" +const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. From 21c22bf4a577d4ffd89fec49745725bc33c28481 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 17:16:57 +0200 Subject: [PATCH 143/143] Pinning objects working --- FloatingSpace/CircularMenu.js | 7 +- FloatingSpace/CircularMenuItem.js | 85 +++++++++++++++--------- FloatingSpace/FloatingObject.js | 15 ++++- FloatingSpace/StrategyPartConstructor.js | 16 ++++- 4 files changed, 88 insertions(+), 35 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 97edde860..1de5f77b1 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -64,6 +64,12 @@ function newCircularMenu () { menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle + if (menuItem.label === undefined) { + menuItem.type = 'Icon Only' + } else { + menuItem.type = 'Icon & Text' + } + menuItem.initialize(payload) menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) menuItems.push(menuItem) @@ -124,4 +130,3 @@ function newCircularMenu () { } } } - diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 4aef13239..9140f1f4b 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -3,6 +3,7 @@ function newCircularMenuItem () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { + type: undefined, isDeployed: undefined, iconOn: undefined, iconOff: undefined, @@ -37,7 +38,7 @@ function newCircularMenuItem () { thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = 150 + thisObject.container.frame.width = 0 thisObject.container.frame.height = 30 let isMouseOver = false @@ -50,6 +51,8 @@ function newCircularMenuItem () { let defaultBackgroudColor = UI_COLOR.RED let backgroundColorToUse = UI_COLOR.RED let temporaryStatus = 0 + + const EXTRA_MOUSE_OVER_ICON_SIZE = 2 return thisObject function finalize () { @@ -87,6 +90,12 @@ function newCircularMenuItem () { selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + + if (thisObject.type === 'Icon & Text') { + thisObject.container.frame.width = 150 + } else { + thisObject.container.frame.width = 50 + } } function getContainer (point) { @@ -101,11 +110,13 @@ function newCircularMenuItem () { } function physics () { - if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) { + const INCREASE_STEP = 0.25 + + if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= INCREASE_STEP) { if (thisObject.currentRadius < thisObject.targetRadius) { - thisObject.currentRadius = thisObject.currentRadius + 0.5 + thisObject.currentRadius = thisObject.currentRadius + INCREASE_STEP } else { - thisObject.currentRadius = thisObject.currentRadius - 0.5 + thisObject.currentRadius = thisObject.currentRadius - INCREASE_STEP } } @@ -162,22 +173,24 @@ function newCircularMenuItem () { function drawBackground () { if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) { - let params = { - cornerRadius: 3, - lineWidth: 0.1, - container: thisObject.container, - borderColor: UI_COLOR.DARK, - backgroundColor: backgroundColorToUse, - castShadow: false - } + if (thisObject.type === 'Icon & Text') { + let params = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: backgroundColorToUse, + castShadow: false + } - if (isMouseOver === true) { - params.opacity = 1 - } else { - params.opacity = 0.8 - } + if (isMouseOver === true) { + params.opacity = 1 + } else { + params.opacity = 0.8 + } - roundedCornersBackground(params) + roundedCornersBackground(params) + } } } @@ -191,26 +204,36 @@ function newCircularMenuItem () { /* Menu Item */ + let iconSize + if (isMouseOver === true) { + iconSize = thisObject.currentRadius + EXTRA_MOUSE_OVER_ICON_SIZE + } else { + iconSize = thisObject.currentRadius + } + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { - browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) + browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2) /* Menu Label */ - let labelPoint - let fontSize = 10 - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - if (thisObject.currentRadius >= thisObject.targetRadius) { - labelPoint = { - x: menuPosition.x + thisObject.currentRadius + 10, - y: menuPosition.y + fontSize * FONT_ASPECT_RATIO - } + if (thisObject.type === 'Icon & Text') { + let labelPoint + let fontSize = 10 browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fillText(labelToPrint, labelPoint.x, labelPoint.y) + + if (thisObject.currentRadius >= thisObject.targetRadius) { + labelPoint = { + x: menuPosition.x + thisObject.currentRadius + 10, + y: menuPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(labelToPrint, labelPoint.x, labelPoint.y) + } } } } } + diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 5137e6d2d..fdaa69dbe 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -19,6 +19,8 @@ function newFloatingObject () { rawMass: 0, // This is the mass value without zoom. rawRadius: 0, // This is the radius of this floating object without zoom. targetRadius: 0, // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value. + isPinned: undefined, + pinToggle: pinToggle, physics: physics, initializeMass: initializeMass, initializeRadius: initializeRadius, @@ -95,6 +97,15 @@ function newFloatingObject () { } } + function pinToggle () { + if (thisObject.isPinned !== true) { + thisObject.isPinned = true + thisObject.positionLocked = true + } else { + thisObject.isPinned = false + } + } + function physics () { thisObjectPhysics() thisObject.payload.uiObject.physics() @@ -171,7 +182,9 @@ function newFloatingObject () { thisObject.payload.uiObject.container.eventHandler.raiseEvent('onNotFocus') - thisObject.positionLocked = false + if (thisObject.isPinned !== true) { + thisObject.positionLocked = false + } thisObject.isOnFocus = false } } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 1a46ff08f..d85905835 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -39,7 +39,7 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.isVisibleFunction = canvas.floatingSpace.isThisPointVisible - let menuItemsInitialValues = getMenuItemsInitialValues(strategyPart, payload) + let menuItemsInitialValues = getMenuItemsInitialValues(strategyPart, floatingObject, payload) strategyPart.initialize(payload, menuItemsInitialValues) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart @@ -51,12 +51,24 @@ function newStrategyPartConstructor () { return } - function getMenuItemsInitialValues (strategyPart, payload) { + function getMenuItemsInitialValues (strategyPart, floatingObject, payload) { let menuItemsInitialValues = [] switch (payload.node.type) { case 'Trading System': { strategyPart.imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -120 + }, { action: 'Reload Trading System', actionFunction: payload.onMenuItemClick,