From bccb7b3e94b22a752bf1f3468aa6d6c8dca94605 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 10:18:51 +0200 Subject: [PATCH 001/172] TimePeriod with Circle --- Scales/TimePeriodScale.js | 70 ++++++++++++++++++++++++++++----------- 1 file changed, 50 insertions(+), 20 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 4df23f8f5..85e3afc74 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -209,35 +209,64 @@ to be visible at the top of the viewPort. */ thisObject.container.frame.width = point2.x - point1.x thisObject.container.frame.height = point3.y - point2.y - let point = { + /* Common Variables */ + + let label = timePeriodLabel.split('-') + let label1 = label[0] + let label2 = label[1].toUpperCase() + let fontSize1 = 25 + let fontSize2 = 10 + + /* We draw the circle container */ + + const RED_LINE_HIGHT = 5 + const RADIOUS = 25 + const OPACITY = 1 + + let centerPoint = { x: mouse.position.x, + y: point1.y + viewPort.margins.BOTTOM - 5 + } + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + 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.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.fill() + + /* Place the Text */ + + let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO + + let labelPoint1 = { + x: mouse.position.x - xOffset1 / 2 - 3, y: point1.y + viewPort.margins.BOTTOM } - let label = timePeriodLabel - let fontSize = 10 + browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO - if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + let labelPoint2 = { + x: mouse.position.x - xOffset2 / 2 - 3, + y: point1.y + viewPort.margins.BOTTOM + fontSize2 + } - browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 1) -/* - browserCanvasContext.beginPath() + browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.moveTo(point.x, point1.y) - browserCanvasContext.lineTo(point.x, point5.y) - - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' - browserCanvasContext.lineWidth = 0.2 - browserCanvasContext.setLineDash([1, 5]) - browserCanvasContext.stroke() -*/ + browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) } function saveObjectState () { @@ -265,3 +294,4 @@ to be visible at the top of the viewPort. */ thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) } } + From b5d49e5148b0982bbc34bdc3d22de4b00cad4f79 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 10:45:40 +0200 Subject: [PATCH 002/172] Switching to font PRIMARY --- FloatingSpace/Note.js | 4 ++-- FloatingSpace/ProfileBall.js | 6 +++--- Frame.js | 4 ++-- Panels/TimeControlPanel.js | 6 +++--- ProductCard.js | 8 ++++---- Utilities.js | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index ed8de1b4e..7fb35b9b9 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -214,7 +214,7 @@ function newNote () { if (label !== undefined) { if (SIZE_PERCENTAGE > 0.9) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + 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.SECONDARY + ' Saira' + 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 8675a3003..426f0ad1a 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -278,7 +278,7 @@ function newProfileBall () { let labelPoint let fontSize = pFloatingObject.currentFontSize - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -290,7 +290,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -303,7 +303,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } diff --git a/Frame.js b/Frame.js index f7b3eec4f..405d5213b 100644 --- a/Frame.js +++ b/Frame.js @@ -1,7 +1,7 @@  function newFrame () { const PANEL_CORNERS_RADIOUS = 5 - const TITLE_BAR_HEIGHT = 14 // this must be grater than radius + const TITLE_BAR_HEIGHT = 15 // this must be grater than radius let frame = { containerName: '', // This is for debugging purposes only. @@ -340,7 +340,7 @@ function newFrame () { let labelPoint let fontSize = 10 - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label = frame.containerName diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index 7a1b51e8e..2f650b65c 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -115,7 +115,7 @@ function newTimeControlPanel () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -132,7 +132,7 @@ function newTimeControlPanel () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -151,7 +151,7 @@ function newTimeControlPanel () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } diff --git a/ProductCard.js b/ProductCard.js index 46512e69c..a6d3c5eff 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -609,7 +609,7 @@ function newProductCard () { let labelPoint let fontSize = 10 - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -626,7 +626,7 @@ function newProductCard () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -642,7 +642,7 @@ function newProductCard () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -665,7 +665,7 @@ function newProductCard () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) diff --git a/Utilities.js b/Utilities.js index 8bc732ab9..663e3eb4b 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.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label = '' + labelToPrint From 1e315841b8d0abfcfb1de196a71ba4c64a06d281 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 12:41:22 +0200 Subject: [PATCH 003/172] Strategy items get clicked --- FloatingSpace/StrategyPart.js | 312 ++++++++++++++++++++++++ FloatingSpace/StrategyParts.js | 69 ++++++ Spaces/StrategySpace.js | 7 + StrategySpace/StrategyCollection.js | 24 +- StrategySpace/StrategyCollectionItem.js | 5 +- 5 files changed, 399 insertions(+), 18 deletions(-) create mode 100644 FloatingSpace/StrategyPart.js create mode 100644 FloatingSpace/StrategyParts.js diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js new file mode 100644 index 000000000..c42db919e --- /dev/null +++ b/FloatingSpace/StrategyPart.js @@ -0,0 +1,312 @@ + +function newStrategyPart () { + let thisObject = { + + physicsLoop: physicsLoop, + onMouseOver: onMouseOver, + onMouseClick: onMouseClick, + onMouseNotOver: onMouseNotOver, + drawBackground: drawBackground, + drawForeground: drawForeground, + initialize: initialize + + } + + 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 + } */ + ] + + return thisObject + + function initialize (callBackFunction) { + 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 () { + // 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 + } + } + } + } + + function onMouseOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + menuItem.targetRadius = menuItem.rawRadius * 1.5 + } + } + + function onMouseNotOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 + } + } + + function onMouseClick (pPoint, pFloatingObject) { + /* What we need to do here is to check which menu item was clicked, if any. */ + + 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.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * 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) { + let point = { + x: pFloatingObject.payload.profile.position.x, + y: pFloatingObject.payload.profile.position.y + } + + point = viewPort.fitIntoVisibleArea(point) + + if (pFloatingObject.currentRadius > 1) { + /* Target Line */ + + browserCanvasContext.beginPath() + 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.lineWidth = 1 + browserCanvasContext.stroke() + browserCanvasContext.setLineDash([0, 0]) + } + + if (pFloatingObject.currentRadius > 0.5) { + /* Target Spot */ + + var radius = 1 + + browserCanvasContext.beginPath() + browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' + browserCanvasContext.fill() + } + } + + 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, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = pFloatingObject.fillStyle + + browserCanvasContext.fill() + } + + /* 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() + } + } + + /* StringBall Menu */ + + for (let i = 0; i < ballStringMenu.length; i++) { + 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)) + } + + browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + } + } + + /* Label Text */ + + if (pFloatingObject.currentRadius > 6) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + + let labelPoint + let fontSize = pFloatingObject.currentFontSize + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + let label + + label = pFloatingObject.payload.profile.upLabel + + 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 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + + label = pFloatingObject.payload.profile.downLabel + + 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 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } +} diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js new file mode 100644 index 000000000..fcd42b795 --- /dev/null +++ b/FloatingSpace/StrategyParts.js @@ -0,0 +1,69 @@ + +function newStrategyParts () { + const MODULE_NAME = 'Strategy Parts' + const ERROR_LOG = true + 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, + destroyStrategyPart: destroyStrategyPart, + initialize: initialize, + finalize: finalize + + } + + let floatingLayer + + return thisObject + + function finalize () { + floatingLayer.finalize() + } + + function initialize (pFloatingLayer, callBackFunction) { + try { + floatingLayer = pFloatingLayer + + callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function createNewStrategyPart (pPayload, callBackFunction) { + let floatingObject = newFloatingObject() + floatingObject.initialize('Profile Ball', onInitialized) + + function onInitialized (err) { + floatingObject.payload = pPayload + + floatingObject.friction = 0.995 + + 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)' + + floatingLayer.addFloatingObject(floatingObject) + + callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) + } + } + + function destroyStrategyPart (pFloatingObjectHandle) { + floatingLayer.killFloatingObject(pFloatingObjectHandle) + } +} + diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index befe0c9d4..18c73f82d 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -32,10 +32,16 @@ function newStrategySpace () { function getContainer (point) { let container + if (thisObject.strategyCollection !== undefined) { + container = thisObject.strategyCollection.getContainer(point) + if (container !== undefined) { return container } + } + if (thisObject.sidePanel !== undefined) { container = thisObject.sidePanel.getContainer(point) if (container !== undefined) { return container } } + return } @@ -43,3 +49,4 @@ function newStrategySpace () { thisObject.sidePanel.draw() } } + diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 2f7b52400..6056f801c 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -26,7 +26,7 @@ function newStrategyCollection () { thisObject.container.frame.position.y = 0 thisObject.container.isDraggeable = false - thisObject.container.isClickeable = true + thisObject.container.isClickeable = false return thisObject @@ -40,8 +40,6 @@ function newStrategyCollection () { return } - thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) - user = JSON.parse(user) const authId = user.authId @@ -233,22 +231,18 @@ function newStrategyCollection () { } } - function onClick () { - - } - function getContainer (point) { let container - /* First we check if this point is inside this object UI. */ - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ - - return undefined + 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 () { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index efc1a0eae..a17c1900b 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,12 +37,12 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - + console.log('ITEM CLICKED') } function getContainer (point) { let container - if (thisObject.container.frame.isThispointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { return undefined @@ -161,4 +161,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - From 48734a1ef0cc800635a29a55c510811c68d8c07d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 13:00:45 +0200 Subject: [PATCH 004/172] Initializing Strategy Parts --- FloatingSpace/FloatingLayer.js | 12 ++---------- FloatingSpace/NoteSets.js | 17 ++--------------- FloatingSpace/ProfileBalls.js | 13 ++----------- FloatingSpace/StrategyParts.js | 11 ++--------- Spaces/FloatingSpace.js | 21 +++++++++------------ StrategySpace/StrategyCollectionItem.js | 17 ++++++++++++++++- 6 files changed, 33 insertions(+), 58 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 0f83cf7e8..7a37e67d6 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -78,17 +78,9 @@ function newFloatingLayer () { } } - function initialize (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function initialize () { - /* We dont need to initialize anything right now. */ - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.message = ' + err.message) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } + /* We dont need to initialize anything right now. */ } function addFloatingObject (pFloatingObject, callBackFunction) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index d3e2ce42e..4db399504 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -31,21 +31,8 @@ function newNoteSets () { return thisObject - function initialize (pFloatingLayer, callBackFunction) { - /* - During the initialization process, we receive the floatingLayer where all the floatingObjects we will be creating here will live at. - */ - - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - - floatingLayer = pFloatingLayer - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function initialize (pFloatingLayer) { + floatingLayer = pFloatingLayer } function createNoteSet (pPayload, pEventHandler, callBackFunction) { diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index de67bfca6..0501269ba 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -35,17 +35,8 @@ function newProfileBalls () { } } - function initialize (pFloatingLayer, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - - floatingLayer = pFloatingLayer - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function initialize (pFloatingLayer) { + floatingLayer = pFloatingLayer } function createNewProfileBall (pPayload, callBackFunction) { diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index fcd42b795..a8c4bb0ee 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -28,15 +28,8 @@ function newStrategyParts () { floatingLayer.finalize() } - function initialize (pFloatingLayer, callBackFunction) { - try { - floatingLayer = pFloatingLayer - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function initialize (pFloatingLayer) { + floatingLayer = pFloatingLayer } function createNewStrategyPart (pPayload, callBackFunction) { diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 0e0010638..e7f6e494d 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -11,6 +11,7 @@ function newFloatingSpace () { let thisObject = { floatingLayer: undefined, // This is the array of floatingObjects being displayed profileBalls: undefined, + strategyParts: undefined, noteSets: undefined, initialize: initialize, finalize: finalize @@ -24,6 +25,7 @@ function newFloatingSpace () { thisObject.floatingLayer.finalize() thisObject.profileBalls.finalize() + thisObject.strategyParts.finalize() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } @@ -31,21 +33,16 @@ function newFloatingSpace () { function initialize (callBackFunction) { thisObject.floatingLayer = newFloatingLayer() - thisObject.floatingLayer.initialize(onFloatingLayerInitialized) + thisObject.floatingLayer.initialize() - function onFloatingLayerInitialized (err) { - thisObject.profileBalls = newProfileBalls() - thisObject.profileBalls.initialize(thisObject.floatingLayer, onProfileBallsInitialized) + thisObject.profileBalls = newProfileBalls() + thisObject.profileBalls.initialize(thisObject.floatingLayer) - function onProfileBallsInitialized (err) { - thisObject.noteSets = newNoteSets() - thisObject.noteSets.initialize(thisObject.floatingLayer, onNoteSetsInitialized) + thisObject.noteSets = newNoteSets() + thisObject.noteSets.initialize(thisObject.floatingLayer) - function onNoteSetsInitialized (err) { - - } - } - } + thisObject.strategyParts = newStrategyParts() + thisObject.strategyParts.initialize(thisObject.floatingLayer) } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index a17c1900b..9abf2644c 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,7 +37,22 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - console.log('ITEM CLICKED') + 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.imageId = imageId + productPlotter.plotter.payload.profile.botAvatar = pProductCard.bot.avatar + + canvas.floatingSpace.profileBalls.createNewProfileBall(productPlotter.plotter.payload, onProfileBallCreated) + + function onProfileBallCreated (err, pProfileHandle) { + productPlotter.profile = pProfileHandle + + /* There is no policy yet of what to do if this fails. */ + } + } } function getContainer (point) { From 7426b5d9cfe1113de8832befc1363ac193a0b0ba Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 13:37:00 +0200 Subject: [PATCH 005/172] Mouse Over Corrected in Canvas --- Canvas.js | 65 +++++++++++++++---------- StrategySpace/StrategyCollectionItem.js | 30 +++++++----- 2 files changed, 57 insertions(+), 38 deletions(-) diff --git a/Canvas.js b/Canvas.js index fceef9090..8a6f1eab3 100644 --- a/Canvas.js +++ b/Canvas.js @@ -170,12 +170,12 @@ function newCanvas () { 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('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, 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('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('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) @@ -540,58 +540,69 @@ function newCanvas () { /* We check if the mouse is over an element of the Strategy Space / */ - container = thisObject.strategySpace.getContainer(point) + if (thisObject.strategySpace !== undefined) { + container = thisObject.strategySpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } /* We check if the mouse is over an element of the Top Space / */ - container = thisObject.topSpace.getContainer(point) + if (thisObject.topSpace !== undefined) { + container = thisObject.topSpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } /* We check if the mouse is over an element of the Bottom Space / */ - container = thisObject.bottomSpace.getContainer(point) + if (thisObject.bottomSpace !== undefined) { + container = thisObject.bottomSpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } /* We check if the mouse is over a panel/ */ - container = thisObject.panelsSpace.getContainer(point) + if (thisObject.panelsSpace !== undefined) { + container = thisObject.panelsSpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } /* We check if the mouse is over a floatingObject/ */ + if (thisObject.floatingSpace !== undefined) { + let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) + if (floatingObjectBeingClicked >= 0) { + let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) + floatingObject.eventHandler.raiseEvent('onMouseOver', point) - if (floatingObjectBeingClicked >= 0) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.eventHandler.raiseEvent('onMouseOver', point) - - return + 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, GET_CONTAINER_PURPOSE.MOUSE_OVER) + if (thisObject.chartSpace !== undefined) { + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 9abf2644c..1ac83be78 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,21 +37,29 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - if (productPlotter.plotter.payload !== undefined) { - let imageId = pProductCard.bot.devTeam + '.' + pProductCard.bot.profilePicture + let handle + let payload = { + profile: { + position: { + x: 500, + y: 500 + }, + visible: true + }, + notes: [] + } - productPlotter.plotter.payload.profile.upLabel = pProductCard.product.shortDisplayName - productPlotter.plotter.payload.profile.downLabel = pProductCard.bot.displayName - productPlotter.plotter.payload.profile.imageId = imageId - productPlotter.plotter.payload.profile.botAvatar = pProductCard.bot.avatar + let imageId = 'My Image.png' - canvas.floatingSpace.profileBalls.createNewProfileBall(productPlotter.plotter.payload, onProfileBallCreated) + payload.profile.upLabel = thisObject.strategy.name + payload.profile.downLabel = thisObject.strategy.name + payload.profile.imageId = imageId + payload.profile.botAvatar = 'dont know what this is' - function onProfileBallCreated (err, pProfileHandle) { - productPlotter.profile = pProfileHandle + canvas.floatingSpace.profileBalls.createNewProfileBall(payload, onProfileBallCreated) - /* There is no policy yet of what to do if this fails. */ - } + function onProfileBallCreated (err, pProfileHandle) { + handle = pProfileHandle } } From 462dfd8ae344f3ccef619178cecc899f6ca86426 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 14:08:59 +0200 Subject: [PATCH 006/172] Strategy Parts showing up --- FloatingSpace/FloatingLayer.js | 37 +++++++++++++++++++++++-- FloatingSpace/FloatingObject.js | 13 +++++++++ FloatingSpace/ProfileBalls.js | 10 +++---- FloatingSpace/StrategyParts.js | 2 +- StrategySpace/StrategyCollectionItem.js | 8 +++--- 5 files changed, 58 insertions(+), 12 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 7a37e67d6..e70b52045 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -11,6 +11,8 @@ function newFloatingLayer () { to specify the location of a bot instance. 2. Notes: Notes are a rectangular area where some text is posted. It has a subject and a body. + + 3. Strategy Parts: These are small balls that represent parts of an strategy. */ const MODULE_NAME = 'Floating Layer' @@ -210,6 +212,21 @@ function newFloatingLayer () { pFloatingObject.payload = payload break } + case 'Strategy Part': { + 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 + } default: { break } @@ -339,6 +356,11 @@ function newFloatingLayer () { break } + case 'Strategy Part': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible + break + } default: { break } @@ -481,7 +503,11 @@ function newFloatingLayer () { 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: { @@ -543,6 +569,10 @@ function newFloatingLayer () { payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible break } + case 'Strategy Part': { + payload.visible = floatingObject.payload.profile.visible + break + } default: { break } @@ -768,6 +798,10 @@ function newFloatingLayer () { payload.position = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position break } + case 'Strategy Part': { + payload.position = floatingObject2.payload.profile.position + break + } default: { break } @@ -991,4 +1025,3 @@ function newFloatingLayer () { } } } - diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6afa87e03..8f1325d97 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -89,7 +89,20 @@ function newFloatingObject () { } break } + + case 'Strategy Part': { + underlayingObject = newStrategyPart() + underlayingObject.initialize(onInitialized) + + function onInitialized (err) { + + } + + break + } default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) break } } diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 0501269ba..8be1a1992 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -1,4 +1,4 @@ -  + function newProfileBalls () { const MODULE_NAME = 'Profile Balls' const INFO_LOG = false @@ -6,11 +6,11 @@ function newProfileBalls () { const logger = newWebDebugLog() logger.fileName = MODULE_NAME - /* + /* - This object deals with Profile Balls, a type of Floating Object that shows profile info in a floating ball. + This object deals with Profile Balls, a type of Floating Object that shows profile info in a floating ball. - */ + */ let thisObject = { @@ -58,7 +58,7 @@ function newProfileBalls () { floatingLayer.addFloatingObject(floatingObject) - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle) } } diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index a8c4bb0ee..19de9247a 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -34,7 +34,7 @@ function newStrategyParts () { function createNewStrategyPart (pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', onInitialized) + floatingObject.initialize('Strategy Part', onInitialized) function onInitialized (err) { floatingObject.payload = pPayload diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 1ac83be78..d60268250 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -49,17 +49,17 @@ function newStrategyCollectionItem () { notes: [] } - let imageId = 'My Image.png' + let imageId // 'My Image.png' payload.profile.upLabel = thisObject.strategy.name payload.profile.downLabel = thisObject.strategy.name payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' - canvas.floatingSpace.profileBalls.createNewProfileBall(payload, onProfileBallCreated) + canvas.floatingSpace.strategyParts.createNewStrategyPart(payload, onStrategyPartCreated) - function onProfileBallCreated (err, pProfileHandle) { - handle = pProfileHandle + function onStrategyPartCreated (err, pPartHandle) { + handle = pPartHandle } } From 035a0cc06e5f7bc9194d81eed05c61df17600ff1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 15:46:47 +0200 Subject: [PATCH 007/172] Centering strategy parts --- ControlsToolBox/SidePanel.js | 3 --- Globals.js | 3 ++- StrategySpace/StrategyCollectionItem.js | 6 +++--- ViewPort.js | 5 +++++ 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/ControlsToolBox/SidePanel.js b/ControlsToolBox/SidePanel.js index 6b68073e3..c6f0e772a 100644 --- a/ControlsToolBox/SidePanel.js +++ b/ControlsToolBox/SidePanel.js @@ -9,9 +9,6 @@ function newSidePanel () { initialize: initialize } - const SIDE_PANEL_WIDTH = 450 - const SIDE_PANEL_TAB_WIDTH = 400 - let isInitialized = false thisObject.container = newContainer() diff --git a/Globals.js b/Globals.js index 4fa5de32a..09dfce412 100644 --- a/Globals.js +++ b/Globals.js @@ -162,7 +162,8 @@ const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; const BOTTOM_SPACE_HEIGHT = 35; const BREAKPOINT_HEIGHT = 15; - +const SIDE_PANEL_WIDTH = 450 + const PRODUCT_CARD_STATUS = { ON: 'on', LOADING: 'loading', diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index d60268250..bee5c4941 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -20,7 +20,7 @@ function newStrategyCollectionItem () { return thisObject function initialize () { - const ITEM_WIDTH = 430 + const ITEM_WIDTH = SIDE_PANEL_WIDTH - 20 const ITEM_HEIGHT = 80 thisObject.container.frame.width = ITEM_WIDTH @@ -41,8 +41,8 @@ function newStrategyCollectionItem () { let payload = { profile: { position: { - x: 500, - y: 500 + x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, + y: viewPort.height / 2 }, visible: true }, diff --git a/ViewPort.js b/ViewPort.js index 70d4aeae1..11b286d3c 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -23,6 +23,8 @@ function newViewPort () { let thisObject = { visibleArea: undefined, + width: undefined, + height: undefined, eventHandler: undefined, zoomTargetLevel: undefined, zoomLevel: undefined, @@ -81,6 +83,9 @@ function newViewPort () { bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN} } + thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x + thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y + readObjectState() } From 43dbfa4420aafd9691aba3c2d05556784f18048b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 16:12:09 +0200 Subject: [PATCH 008/172] Generating all Strategy Parts --- FloatingSpace/StrategyPart.js | 56 +++++++++--------- FloatingSpace/StrategyParts.js | 6 +- StrategySpace/StrategyCollectionItem.js | 78 ++++++++++++++++++++++++- 3 files changed, 107 insertions(+), 33 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index c42db919e..75f676d57 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -21,34 +21,34 @@ function newStrategyPart () { 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 - } */ + }, + { + 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 + } ] return thisObject diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 19de9247a..6f52971c2 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -41,9 +41,9 @@ function newStrategyParts () { floatingObject.friction = 0.995 - floatingObject.initializeMass(100) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) + floatingObject.initializeMass(50) + floatingObject.initializeRadius(15) + floatingObject.initializeImageSize(25) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index bee5c4941..b01964b16 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,6 +37,10 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { + generateStrategyParts() + } + + function createPart (upLabel, downLabel) { let handle let payload = { profile: { @@ -51,8 +55,8 @@ function newStrategyCollectionItem () { let imageId // 'My Image.png' - payload.profile.upLabel = thisObject.strategy.name - payload.profile.downLabel = thisObject.strategy.name + payload.profile.upLabel = upLabel + payload.profile.downLabel = downLabel payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' @@ -63,6 +67,76 @@ function newStrategyCollectionItem () { } } + function generateStrategyParts () { + let strategy = thisObject.strategy + createPart('Strategy', strategy.name) + + createPart('Strategy Entry', '') + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + + createPart('Strategy Exit', '') + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + + createPart('Trade Entry', '') + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + + createPart('Stop', '') + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + createPart('Phase', phase.name) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + } + + createPart('Take Profit', '') + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + createPart('Phase', phase.name) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + } + } + function getContainer (point) { let container if (thisObject.container.frame.isThisPointHere(point, true) === true) { From 69cce193bb778c8489051112402996640e3d6746 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 16:20:38 +0200 Subject: [PATCH 009/172] turning chartspace invisible works --- Spaces/ChartSpace.js | 7 +++++-- Spaces/PanelsSpace.js | 5 +++++ StrategySpace/StrategyCollectionItem.js | 2 ++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 25f51f709..3a25d6cc7 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -14,6 +14,7 @@ function newChartSpace () { logger.fileName = MODULE_NAME let thisObject = { + visible: true, container: undefined, drawBackground: drawBackground, draw: draw, @@ -83,6 +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] timeMachine.drawBackground() @@ -90,7 +93,7 @@ function newChartSpace () { } function draw () { - // thisObject.container.frame.draw(false, false) + if (thisObject.visible !== true) { return } for (var i = 0; i < thisObject.timeMachines.length; i++) { var timeMachine = thisObject.timeMachines[i] @@ -99,7 +102,7 @@ function newChartSpace () { } function getContainer (point, purpose) { - if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } + if (thisObject.visible !== true) { return } let container diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 151d5af65..74b00c25e 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -6,6 +6,7 @@ The Panel Space y the place wehre all panels live, no matter who create them. function newPanelsSpace () { let thisObject = { + visible: true, container: undefined, createNewPanel: createNewPanel, destroyPanel: destroyPanel, @@ -100,6 +101,8 @@ function newPanelsSpace () { } function draw () { + if (thisObject.visible !== true) { return } + thisObject.container.frame.draw(false, false) thisObject.panels = panelsMap.get('Global') @@ -120,6 +123,8 @@ function newPanelsSpace () { } function getContainer (point) { + if (thisObject.visible !== true) { return } + let container /* diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index b01964b16..e982517b0 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,6 +37,8 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false generateStrategyParts() } From 4e579df61ea507c71c23edce17eb0bb355d9d795 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 18:13:12 +0200 Subject: [PATCH 010/172] Equilibrium reached --- FloatingSpace/FloatingObject.js | 4 +- FloatingSpace/NoteSets.js | 2 +- FloatingSpace/ProfileBalls.js | 2 +- FloatingSpace/StrategyPart.js | 17 ++- FloatingSpace/StrategyParts.js | 69 ++++++++++-- StrategySpace/StrategyCollection.js | 2 +- StrategySpace/StrategyCollectionItem.js | 140 +++++++++++++++++++----- 7 files changed, 195 insertions(+), 41 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 8f1325d97..4486fb94a 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -64,7 +64,7 @@ function newFloatingObject () { return thisObject - function initialize (pType, callBackFunction) { + function initialize (pType, floatingLayer, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } @@ -92,7 +92,7 @@ function newFloatingObject () { case 'Strategy Part': { underlayingObject = newStrategyPart() - underlayingObject.initialize(onInitialized) + underlayingObject.initialize(floatingLayer, onInitialized) function onInitialized (err) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index 4db399504..f341d8aab 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -219,7 +219,7 @@ function newNoteSets () { */ let floatingObject = newFloatingObject() - floatingObject.initialize('Note', 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 8be1a1992..65a0e4a95 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', onInitialized) + floatingObject.initialize('Profile Ball', floatingLayer, onInitialized) function onInitialized (err) { floatingObject.payload = pPayload diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 75f676d57..8ae664530 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -51,9 +51,13 @@ function newStrategyPart () { } ] + let floatingLayer + return thisObject - function initialize (callBackFunction) { + function initialize (pFloatingLayer, callBackFunction) { + floatingLayer = pFloatingLayer + for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] @@ -168,6 +172,17 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { + /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ + + 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 + } + + /* Here I continue painting the background */ + let point = { x: pFloatingObject.payload.profile.position.x, y: pFloatingObject.payload.profile.position.y diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 6f52971c2..5aeb54f4e 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -32,19 +32,73 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (pPayload, callBackFunction) { + function createNewStrategyPart (type, pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Strategy Part', onInitialized) + floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) function onInitialized (err) { floatingObject.payload = pPayload - floatingObject.friction = 0.995 + 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 + } + default: { + level_3() + } + } - floatingObject.initializeMass(50) - floatingObject.initializeRadius(15) - floatingObject.initializeImageSize(25) - floatingObject.initializeFontSize(10) + function level_1 () { + floatingObject.friction = 0.9 + + floatingObject.initializeMass(100) + floatingObject.initializeRadius(50) + floatingObject.initializeImageSize(60) + floatingObject.initializeFontSize(10) + } + + function level_2 () { + floatingObject.friction = 0.85 + + floatingObject.initializeMass(50) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + } + + function level_3 () { + floatingObject.friction = 0.8 + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(10) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + } floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' @@ -59,4 +113,3 @@ function newStrategyParts () { floatingLayer.killFloatingObject(pFloatingObjectHandle) } } - diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 6056f801c..2069ae1dc 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -179,7 +179,7 @@ function newStrategyCollection () { }) .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - thisObject.strategies = response.data.strategizer_StrategyByFb.subStrategies + thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) createCollectionItems() resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index e982517b0..c7b725bc3 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -17,6 +17,8 @@ function newStrategyCollectionItem () { thisObject.container.isClickeable = true thisObject.container.isDraggeable = false + let visible = false + return thisObject function initialize () { @@ -37,13 +39,20 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false - generateStrategyParts() + if (visible === false) { + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false + generateStrategyParts() + visible = true + } else { + canvas.chartSpace.visible = true + canvas.panelsSpace.visible = true + destroyStrategyParts() + visible = false + } } - function createPart (upLabel, downLabel) { - let handle + function createPart (partType, name, node, parentNode) { let payload = { profile: { position: { @@ -57,83 +66,160 @@ function newStrategyCollectionItem () { let imageId // 'My Image.png' - payload.profile.upLabel = upLabel - payload.profile.downLabel = downLabel + payload.profile.upLabel = partType + payload.profile.downLabel = name payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' + payload.parentNode = parentNode - canvas.floatingSpace.strategyParts.createNewStrategyPart(payload, onStrategyPartCreated) + node.payload = payload + + canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated) function onStrategyPartCreated (err, pPartHandle) { - handle = pPartHandle + node.handle = pPartHandle } } + function destroyPart (node) { + canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) + } + function generateStrategyParts () { let strategy = thisObject.strategy - createPart('Strategy', strategy.name) + createPart('Strategy', strategy.name, strategy, undefined) - createPart('Strategy Entry', '') + 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) + createPart('Situation', situation.name, situation, strategy.entryPoint) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } - createPart('Strategy Exit', '') + 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) + createPart('Situation', situation.name, situation, strategy.exitPoint) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } - createPart('Trade Entry', '') + 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) + createPart('Situation', situation.name, situation, strategy.sellPoint) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } - createPart('Stop', '') + createPart('Stop', '', strategy.stopLoss, strategy) for (let p = 0; p < strategy.stopLoss.phases.length; p++) { let phase = strategy.stopLoss.phases[p] - createPart('Phase', phase.name) + createPart('Phase', phase.name, phase, strategy.stopLoss) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name) + createPart('Situation', situation.name, situation, phase) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } } - createPart('Take Profit', '') + createPart('Take Profit', '', strategy.buyOrder, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - createPart('Phase', phase.name) + createPart('Phase', phase.name, phase, strategy.buyOrder) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name) + createPart('Situation', situation.name, situation, phase) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) + } + } + } + } + + 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) } } } From 1687f96166879b91bc35ee0da04d2b1e14ec3edc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 19:10:37 +0200 Subject: [PATCH 011/172] Dancing Stuff --- FloatingSpace/FloatingLayer.js | 2 +- FloatingSpace/StrategyPart.js | 7 +++- FloatingSpace/StrategyParts.js | 56 +++++++++++++++++++++---- StrategySpace/StrategyCollectionItem.js | 33 ++++++++------- 4 files changed, 74 insertions(+), 24 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index e70b52045..01ba5ab27 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -63,7 +63,7 @@ function newFloatingLayer () { let dyingFloatingObjects = [] - let maxTargetRepulsionForce = 0.003 + let maxTargetRepulsionForce = 0.001 let currentHandle = 0 return thisObject diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 8ae664530..7ee530a3b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -52,6 +52,7 @@ function newStrategyPart () { ] let floatingLayer + let isMouseOver = false return thisObject @@ -107,6 +108,8 @@ function newStrategyPart () { menuItem.targetRadius = menuItem.rawRadius * 1.5 } + + isMouseOver = true } function onMouseNotOver () { @@ -115,6 +118,8 @@ function newStrategyPart () { menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 } + + isMouseOver = false } function onMouseClick (pPoint, pFloatingObject) { @@ -312,7 +317,7 @@ function newStrategyPart () { label = pFloatingObject.payload.profile.downLabel - if (label !== undefined) { + 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 diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 5aeb54f4e..e37a09ccd 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -37,6 +37,7 @@ function newStrategyParts () { floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) function onInitialized (err) { + const FRICTION = 0.98 floatingObject.payload = pPayload switch (type) { @@ -68,39 +69,78 @@ function newStrategyParts () { level_2() break } - default: { + 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) } } } function level_1 () { - floatingObject.friction = 0.9 + floatingObject.friction = FRICTION floatingObject.initializeMass(100) - floatingObject.initializeRadius(50) - floatingObject.initializeImageSize(60) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' } function level_2 () { - floatingObject.friction = 0.85 + floatingObject.friction = FRICTION floatingObject.initializeMass(50) floatingObject.initializeRadius(30) floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.5)' } function level_3 () { - floatingObject.friction = 0.8 + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(20) + floatingObject.initializeImageSize(30) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.5)' + } + + function level_4 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(15) + floatingObject.initializeImageSize(20) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 0.5)' + } + + function level_5 () { + floatingObject.friction = FRICTION floatingObject.initializeMass(10) floatingObject.initializeRadius(10) - floatingObject.initializeImageSize(50) + floatingObject.initializeImageSize(10) floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.5)' } - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' floatingLayer.addFloatingObject(floatingObject) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index c7b725bc3..118a528f0 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -52,7 +52,7 @@ function newStrategyCollectionItem () { } } - function createPart (partType, name, node, parentNode) { + function createPart (partType, name, node, parentNode, title) { let payload = { profile: { position: { @@ -66,7 +66,12 @@ function newStrategyCollectionItem () { let imageId // 'My Image.png' - payload.profile.upLabel = partType + if (title !== undefined) { + payload.profile.upLabel = title + } else { + payload.profile.upLabel = partType + } + payload.profile.downLabel = name payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' @@ -92,48 +97,48 @@ 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) + 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) + 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) + 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) + 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) + 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) + 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] - createPart('Phase', phase.name, phase, strategy.stopLoss) + createPart('Phase', phase.name, phase, strategy.stopLoss, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase) + 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) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) } } } @@ -141,15 +146,15 @@ function newStrategyCollectionItem () { createPart('Take Profit', '', strategy.buyOrder, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - createPart('Phase', phase.name, phase, strategy.buyOrder) + createPart('Phase', phase.name, phase, strategy.buyOrder, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase) + 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) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) } } } From 87e8a108f7bff193fce261c5c16d4429f8c50c2f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 19:36:29 +0200 Subject: [PATCH 012/172] Phases linked --- Animation.js | 2 -- FloatingSpace/StrategyParts.js | 2 +- StrategySpace/StrategyCollectionItem.js | 33 +++++++++++++++++++++++-- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/Animation.js b/Animation.js index 063725ada..d27dc114c 100644 --- a/Animation.js +++ b/Animation.js @@ -131,8 +131,6 @@ function newAnimation () { } function clearBrowserCanvas () { - if (INFO_LOG === true) { logger.write('[INFO] clearBrowserCanvas -> Entering function.') } - browserCanvasContext.beginPath() browserCanvasContext.rect(0, 0, browserCanvas.width, browserCanvas.height) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index e37a09ccd..81b524ad5 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -37,7 +37,7 @@ function newStrategyParts () { floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) function onInitialized (err) { - const FRICTION = 0.98 + const FRICTION = 0.97 floatingObject.payload = pPayload switch (type) { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 118a528f0..4a93b2c1f 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -91,6 +91,7 @@ function newStrategyCollectionItem () { } function generateStrategyParts () { + let lastPhase let strategy = thisObject.strategy createPart('Strategy', strategy.name, strategy, undefined) @@ -130,7 +131,15 @@ function newStrategyCollectionItem () { createPart('Stop', '', strategy.stopLoss, strategy) for (let p = 0; p < strategy.stopLoss.phases.length; p++) { let phase = strategy.stopLoss.phases[p] - createPart('Phase', phase.name, phase, strategy.stopLoss, 'Phase' + ' ' + (p + 1)) + + let parent + if (p === 0) { + parent = strategy.stopLoss + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -146,7 +155,14 @@ function newStrategyCollectionItem () { createPart('Take Profit', '', strategy.buyOrder, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - createPart('Phase', phase.name, phase, strategy.buyOrder, 'Phase' + ' ' + (p + 1)) + let parent + if (p === 0) { + parent = strategy.buyOrder + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -246,6 +262,19 @@ 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.DARK + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() } function text () { From ef2daea137b0f7a755eeb3a2d2def4d1e5d58955 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 19:48:05 +0200 Subject: [PATCH 013/172] Black Background --- FloatingSpace/StrategyPart.js | 3 ++- FloatingSpace/StrategyParts.js | 12 ++++++------ StrategySpace/StrategyCollectionItem.js | 3 ++- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 7ee530a3b..cd9ddd378 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -247,7 +247,7 @@ function newStrategyPart () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius / 2, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -330,3 +330,4 @@ function newStrategyPart () { } } } + diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 81b524ad5..b010dde7e 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -94,7 +94,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' } function level_2 () { @@ -105,7 +105,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' } function level_3 () { @@ -116,7 +116,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(30) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' } function level_4 () { @@ -127,7 +127,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(20) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)' } function level_5 () { @@ -138,10 +138,10 @@ function newStrategyParts () { floatingObject.initializeImageSize(10) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)' } - floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' floatingLayer.addFloatingObject(floatingObject) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 4a93b2c1f..8add4cea7 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -271,7 +271,7 @@ function newStrategyCollectionItem () { browserCanvasContext.beginPath() browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -380,3 +380,4 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } + From c7af4af7e25ef71660e367815dd46b0b66650828 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 20:02:52 +0200 Subject: [PATCH 014/172] better radious --- FloatingSpace/StrategyPart.js | 4 ++-- FloatingSpace/StrategyParts.js | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index cd9ddd378..41bea693e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -106,7 +106,7 @@ function newStrategyPart () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.targetRadius = menuItem.rawRadius * 1.5 + menuItem.targetRadius = menuItem.rawRadius * 2.5 } isMouseOver = true @@ -247,7 +247,7 @@ function newStrategyPart () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius / 2, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index b010dde7e..ae0d78a8a 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -90,8 +90,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(100) - floatingObject.initializeRadius(40) - floatingObject.initializeImageSize(70) + floatingObject.initializeRadius(60) + floatingObject.initializeImageSize(110) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' @@ -101,8 +101,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(50) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' @@ -112,8 +112,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(20) - floatingObject.initializeImageSize(30) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' @@ -123,8 +123,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(15) - floatingObject.initializeImageSize(20) + floatingObject.initializeRadius(35) + floatingObject.initializeImageSize(60) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)' @@ -134,8 +134,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(10) - floatingObject.initializeImageSize(10) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)' From f7f27159e32e06241c047b3a6d110db9d015e9bf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 20:07:26 +0200 Subject: [PATCH 015/172] More expansion when mouse over --- FloatingSpace/FloatingObject.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4486fb94a..20aab6a21 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -134,9 +134,9 @@ function newFloatingObject () { } function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 1.5 - thisObject.targetImageSize = thisObject.rawImageSize * 1.5 - thisObject.targetFontSize = thisObject.rawFontSize * 1.5 + thisObject.targetRadius = thisObject.rawRadius * 2.5 + thisObject.targetImageSize = thisObject.rawImageSize * 2.5 + thisObject.targetFontSize = thisObject.rawFontSize * 2.5 underlayingObject.onMouseOver() } From 4d2e9dcf637647548ee602b155d43586c98e5177 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 08:56:10 +0200 Subject: [PATCH 016/172] 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 017/172] 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 018/172] 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 019/172] 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 020/172] 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 021/172] 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 022/172] 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 023/172] 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 024/172] 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 025/172] 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 026/172] 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 027/172] 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 028/172] 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 029/172] 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 030/172] 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 031/172] 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 032/172] 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 033/172] 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 034/172] 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 035/172] 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 036/172] 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 037/172] 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 038/172] 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 039/172] 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 040/172] 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 041/172] 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 042/172] 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 043/172] 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 044/172] 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 045/172] 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 046/172] 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 047/172] 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 048/172] 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 049/172] 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 050/172] 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 051/172] 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 052/172] 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 053/172] 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 054/172] 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 055/172] 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 056/172] 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 057/172] 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 058/172] 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 059/172] 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 060/172] 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 061/172] 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 062/172] 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 063/172] 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 064/172] 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 065/172] 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 066/172] 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 067/172] 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 068/172] 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 069/172] 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 070/172] 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 071/172] 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 072/172] 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 073/172] 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 074/172] 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 075/172] 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 076/172] 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 077/172] 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 078/172] 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 079/172] 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 080/172] 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 081/172] 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 082/172] 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 083/172] 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 084/172] 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 085/172] 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 086/172] 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 087/172] 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 088/172] 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 089/172] 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 090/172] 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 091/172] 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 092/172] 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 093/172] 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 094/172] 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 095/172] 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 096/172] 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 097/172] 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 098/172] 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 099/172] 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 100/172] 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 101/172] 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 102/172] 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 103/172] 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 104/172] 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 105/172] 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 106/172] 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 107/172] 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 108/172] 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 109/172] 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 110/172] 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 111/172] 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 112/172] 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 113/172] 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 114/172] 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 115/172] 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 116/172] 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 117/172] 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 118/172] 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 119/172] 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 120/172] 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 121/172] 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 122/172] 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 123/172] 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 124/172] 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 125/172] 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 126/172] 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 127/172] 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 128/172] 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 129/172] 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 130/172] 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 131/172] 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 132/172] 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 133/172] 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 134/172] 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 135/172] 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 136/172] 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 137/172] 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 138/172] 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 139/172] 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 140/172] 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 141/172] 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 142/172] 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 143/172] 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 144/172] 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 145/172] 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 146/172] 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 147/172] 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 148/172] 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 149/172] 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 150/172] 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 151/172] 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 152/172] 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 153/172] 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 154/172] 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 155/172] 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 156/172] 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 157/172] 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 158/172] 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, From c5e6d55fc0380d4efd5e79d23e13e8969d238910 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 18:08:35 +0200 Subject: [PATCH 159/172] Pinning implementation complete --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 40 ++++-- FloatingSpace/FloatingObject.js | 3 +- FloatingSpace/StrategyPartConstructor.js | 160 ++++++++++++++++++++--- 4 files changed, 172 insertions(+), 32 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 1de5f77b1..f2181a6b5 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -63,6 +63,7 @@ function newCircularMenu () { menuItem.targetRadius = menuItemInitialValue.label menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle + menuItem.currentStatus = menuItemInitialValue.currentStatus if (menuItem.label === undefined) { menuItem.type = 'Icon Only' diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 9140f1f4b..53803a756 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -7,6 +7,7 @@ function newCircularMenuItem () { isDeployed: undefined, iconOn: undefined, iconOff: undefined, + currentIcon: undefined, action: undefined, actionFunction: undefined, label: undefined, @@ -64,6 +65,7 @@ function newCircularMenuItem () { thisObject.container = undefined thisObject.iconOn = undefined thisObject.iconOff = undefined + thisObject.currentIcon = undefined thisObject.payload = undefined thisObject.actionFunction = undefined } @@ -73,19 +75,26 @@ function newCircularMenuItem () { /* Load Menu Images */ thisObject.iconOn = new Image() - thisObject.iconOn.onload = onImageLoad + thisObject.iconOn.onload = onOnImageLoad - function onImageLoad () { - thisObject.iconOff = new Image() - thisObject.iconOff.onload = onImageLoad + function onOnImageLoad () { + if (thisObject.imagePathOff !== undefined) { + thisObject.iconOff = new Image() + thisObject.iconOff.onload = onOffImageLoad - function onImageLoad () { - thisObject.canDrawIcon = true + function onOffImageLoad () { + thisObject.canDrawIcon = true + } + thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff } - 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. + + if (thisObject.currentStatus === true) { + thisObject.icon = thisObject.iconOn + } else { + thisObject.icon = thisObject.iconOff + } selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -123,6 +132,8 @@ 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 + /* Temporary Status impacts on the label to use and the background of that label */ + temporaryStatus-- if (temporaryStatus < 0) { temporaryStatus = 0 @@ -131,6 +142,14 @@ function newCircularMenuItem () { labelToPrint = thisObject.label backgroundColorToUse = defaultBackgroudColor } + + /* Current Status sets the icon to be used */ + + if (thisObject.currentStatus === true) { + thisObject.icon = thisObject.iconOn + } else { + thisObject.icon = thisObject.iconOff + } } function onMouseOver (point) { @@ -151,9 +170,9 @@ function newCircularMenuItem () { setTemporaryStatus(thisObject.workingLabel, UI_COLOR.GREY, 500) } - let result = await thisObject.actionFunction(thisObject.payload, thisObject.action) + thisObject.currentStatus = await thisObject.actionFunction(thisObject.payload, thisObject.action) - if (result === true) { + if (thisObject.currentStatus === true) { if (thisObject.workDoneLabel !== undefined) { setTemporaryStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250) } @@ -236,4 +255,3 @@ function newCircularMenuItem () { } } } - diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index fdaa69dbe..818d734da 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -19,7 +19,7 @@ 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, + isPinned: false, pinToggle: pinToggle, physics: physics, initializeMass: initializeMass, @@ -104,6 +104,7 @@ function newFloatingObject () { } else { thisObject.isPinned = false } + return thisObject.isPinned } function physics () { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index d85905835..758c2892c 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -55,19 +55,22 @@ function newStrategyPartConstructor () { let menuItemsInitialValues = [] switch (payload.node.type) { case 'Trading System': { + floatingObject.isPinned = true + floatingObject.positionLocked = true strategyPart.imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', actionFunction: floatingObject.pinToggle, + currentStatus: true, label: undefined, visible: false, imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -120 + angle: -135 }, { action: 'Reload Trading System', @@ -75,7 +78,7 @@ function newStrategyPartConstructor () { label: 'Reload', visible: false, imagePathOn: 'Images/icons/style-01/vector.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/vector.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -90,7 +93,7 @@ function newStrategyPartConstructor () { workFailedLabel: 'Not Saved', visible: false, imagePathOn: 'Images/icons/style-01/upload.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/upload.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -102,7 +105,7 @@ function newStrategyPartConstructor () { label: 'New Strategy', visible: false, imagePathOn: 'Images/icons/style-01/quality.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/quality.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -114,7 +117,7 @@ function newStrategyPartConstructor () { label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -125,13 +128,26 @@ function newStrategyPartConstructor () { case 'Strategy': { strategyPart.imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -143,7 +159,7 @@ function newStrategyPartConstructor () { label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -154,13 +170,26 @@ function newStrategyPartConstructor () { case 'Strategy Entry Event': { strategyPart.imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -171,13 +200,26 @@ function newStrategyPartConstructor () { case 'Strategy Exit Event': { strategyPart.imagePath = 'Images/icons/style-01/support.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -188,13 +230,26 @@ function newStrategyPartConstructor () { case 'Trade Entry Event': { strategyPart.imagePath = 'Images/icons/style-01/compass.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -205,13 +260,26 @@ function newStrategyPartConstructor () { case 'Stop': { strategyPart.imagePath = 'Images/icons/style-01/pixel.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -222,13 +290,26 @@ function newStrategyPartConstructor () { case 'Take Profit': { strategyPart.imagePath = 'Images/icons/style-01/competition.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -244,13 +325,26 @@ function newStrategyPartConstructor () { strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -262,7 +356,7 @@ function newStrategyPartConstructor () { label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -274,7 +368,7 @@ function newStrategyPartConstructor () { label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -285,13 +379,26 @@ function newStrategyPartConstructor () { case 'Situation': { strategyPart.imagePath = 'Images/icons/style-01/attractive.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/testing.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -303,7 +410,7 @@ function newStrategyPartConstructor () { label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -319,13 +426,26 @@ function newStrategyPartConstructor () { strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { 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', + imagePathOff: 'Images/icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -337,7 +457,7 @@ function newStrategyPartConstructor () { label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, From f72aeebc58e039aa3491cfbbfe4ca14cdb9a7f4f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 18:17:32 +0200 Subject: [PATCH 160/172] Develop ready --- Globals.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Globals.js b/Globals.js index 039d5dbcd..77d9ed28c 100644 --- a/Globals.js +++ b/Globals.js @@ -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. From d77f5094ca851792a794d89b235030b68c18599d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 22:02:41 +0200 Subject: [PATCH 161/172] Capital on images path --- FloatingSpace/StrategyPartConstructor.js | 132 +++++++++++------------ Spaces/StrategySpace.js | 56 ++++++++++ 2 files changed, 122 insertions(+), 66 deletions(-) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 758c2892c..b3335ee6c 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -57,7 +57,7 @@ function newStrategyPartConstructor () { case 'Trading System': { floatingObject.isPinned = true floatingObject.positionLocked = true - strategyPart.imagePath = 'Images/icons/style-01/analysis.png' + strategyPart.imagePath = 'Images/Icons/style-01/analysis.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -65,8 +65,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -77,8 +77,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'Images/icons/style-01/vector.png', - imagePathOff: 'Images/icons/style-01/vector.png', + imagePathOn: 'Images/Icons/style-01/vector.png', + imagePathOff: 'Images/Icons/style-01/vector.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -92,8 +92,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'Images/icons/style-01/upload.png', - imagePathOff: 'Images/icons/style-01/upload.png', + imagePathOn: 'Images/Icons/style-01/upload.png', + imagePathOff: 'Images/Icons/style-01/upload.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -104,8 +104,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'Images/icons/style-01/quality.png', - imagePathOff: 'Images/icons/style-01/quality.png', + imagePathOn: 'Images/Icons/style-01/quality.png', + imagePathOff: 'Images/Icons/style-01/quality.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -116,8 +116,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/tools.png', + imagePathOn: 'Images/Icons/style-01/tools.png', + imagePathOff: 'Images/Icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -126,7 +126,7 @@ function newStrategyPartConstructor () { break } case 'Strategy': { - strategyPart.imagePath = 'Images/icons/style-01/quality.png' + strategyPart.imagePath = 'Images/Icons/style-01/quality.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -134,8 +134,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -146,8 +146,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -158,8 +158,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/tools.png', + imagePathOn: 'Images/Icons/style-01/tools.png', + imagePathOff: 'Images/Icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -168,7 +168,7 @@ function newStrategyPartConstructor () { break } case 'Strategy Entry Event': { - strategyPart.imagePath = 'Images/icons/style-01/startup.png' + strategyPart.imagePath = 'Images/Icons/style-01/startup.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -176,8 +176,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -188,8 +188,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -198,7 +198,7 @@ function newStrategyPartConstructor () { break } case 'Strategy Exit Event': { - strategyPart.imagePath = 'Images/icons/style-01/support.png' + strategyPart.imagePath = 'Images/Icons/style-01/support.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -206,8 +206,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -218,8 +218,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -228,7 +228,7 @@ function newStrategyPartConstructor () { break } case 'Trade Entry Event': { - strategyPart.imagePath = 'Images/icons/style-01/compass.png' + strategyPart.imagePath = 'Images/Icons/style-01/compass.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -236,8 +236,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -248,8 +248,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -258,7 +258,7 @@ function newStrategyPartConstructor () { break } case 'Stop': { - strategyPart.imagePath = 'Images/icons/style-01/pixel.png' + strategyPart.imagePath = 'Images/Icons/style-01/pixel.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -266,8 +266,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -278,8 +278,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/placeholder.png', + imagePathOn: 'Images/Icons/style-01/placeholder.png', + imagePathOff: 'Images/Icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -288,7 +288,7 @@ function newStrategyPartConstructor () { break } case 'Take Profit': { - strategyPart.imagePath = 'Images/icons/style-01/competition.png' + strategyPart.imagePath = 'Images/Icons/style-01/competition.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -296,8 +296,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -308,8 +308,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/placeholder.png', + imagePathOn: 'Images/Icons/style-01/placeholder.png', + imagePathOff: 'Images/Icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -318,7 +318,7 @@ function newStrategyPartConstructor () { break } case 'Phase': { - strategyPart.imagePath = 'Images/icons/style-01/placeholder.png' + strategyPart.imagePath = 'Images/Icons/style-01/placeholder.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() @@ -331,8 +331,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -343,8 +343,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/html.png', + imagePathOn: 'Images/Icons/style-01/html.png', + imagePathOff: 'Images/Icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -355,8 +355,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -367,8 +367,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -377,7 +377,7 @@ function newStrategyPartConstructor () { break } case 'Situation': { - strategyPart.imagePath = 'Images/icons/style-01/attractive.png' + strategyPart.imagePath = 'Images/Icons/style-01/attractive.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -385,8 +385,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -397,8 +397,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'Images/icons/style-01/testing.png', - imagePathOff: 'Images/icons/style-01/testing.png', + imagePathOn: 'Images/Icons/style-01/testing.png', + imagePathOff: 'Images/Icons/style-01/testing.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -409,8 +409,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -419,7 +419,7 @@ function newStrategyPartConstructor () { break } case 'Condition': { - strategyPart.imagePath = 'Images/icons/style-01/testing.png' + strategyPart.imagePath = 'Images/Icons/style-01/testing.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() @@ -432,8 +432,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -444,8 +444,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/html.png', + imagePathOn: 'Images/Icons/style-01/html.png', + imagePathOff: 'Images/Icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -456,8 +456,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index c0a9dcad7..8b666a730 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -32,6 +32,62 @@ function newStrategySpace () { // thisObject.sidePanel.areas.push(thisObject.workplace) } + function loadIconCollection () { + const iconsNames = [ + 'analysis', + 'analysis-1', + 'approve', + 'attach', + 'attractive', + 'brainstorming', + 'broken-link', + 'chat', + 'chronometer', + 'compass', + 'competition', + 'content', + 'design-tool', + 'grid', + 'headphones', + 'html', + 'image', + 'layout', + 'loading', + 'login', + 'pantone', + 'paper-plane', + 'photo-camera', + 'piggy-bank', + 'pipette', + 'pixel', + 'placeholder', + 'planning', + 'promotion', + 'pyramid', + 'quality', + 'responsive', + 'schedule', + 'search', + 'security', + 'settings', + 'sitemap', + 'startup', + 'support', + 'tap', + 'target', + 'targeting', + 'task', + 'testing', + 'text', + 'timeline', + 'tools', + 'trash', + 'upload', + 'vector', + 'video-player' + ] + } + function makeVisible () { if (thisObject.workplace.isDeployed !== true) { thisObject.workplace.deploydTradingSystem() From 59dd490c3f0f363ab4f5fa4d5bb89133f5b174b1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 00:21:36 +0200 Subject: [PATCH 162/172] Adjusted code editor to live inside the master app --- FloatingSpace/CodeEditor.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index edd2cfd74..0d3b28d1d 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -92,7 +92,7 @@ function newCodeEditor () { 'font-size: 12px;' + 'background-color: rgb(204, 88, 53);' + 'color:rgb(255, 255, 255);' + - 'width: ' + thisObject.container.frame.width + 'px;' + + 'width: ' + thisObject.container.frame.width + 'px;' + 'height: ' + thisObject.container.frame.height + 'px' textArea.style.display = 'block' textArea.focus() @@ -128,12 +128,12 @@ 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.width = thisObject.container.frame.radius * 1.8 thisObject.container.frame.height = thisObject.container.frame.radius * 1 let textAreaPosition = { x: 0 - thisObject.container.frame.width / 2, - y: 0 + y: 0 + thisObject.container.frame.height * 2 / 7 } textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) @@ -148,7 +148,7 @@ function newCodeEditor () { } if (thisObject.visible === true) { let textAreaDiv = document.getElementById('textAreaDiv') - textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' + textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' } } From 574897b6a15e1374c0da82db0bac52bdfb666152 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 09:50:37 +0200 Subject: [PATCH 163/172] Image by part type implemented --- FloatingSpace/StrategyPart.js | 22 +++------- FloatingSpace/StrategyPartConstructor.js | 10 ----- Globals.js | 4 +- Spaces/StrategySpace.js | 52 +++++++++++++++++++++--- 4 files changed, 55 insertions(+), 33 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3bd8d5f24..b662e24dc 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -34,8 +34,7 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let image - let imagePath + let icon let selfFocusEventSubscriptionId let selfNotFocuskEventSubscriptionId @@ -63,8 +62,7 @@ function newStrategyPart () { thisObject.codeEditor = undefined } - image = undefined - imagePath = undefined + icon = undefined } function initialize (payload, menuItemsInitialValues) { @@ -85,15 +83,7 @@ function newStrategyPart () { /* Load Part Image */ - if (thisObject.imagePath !== undefined) { - image = new Image() - image.onload = onImageLoad - - function onImageLoad () { - image.canDrawIcon = true - } - image.src = window.canvasApp.urlPrefix + thisObject.imagePath - } + icon = canvas.strategySpace.iconByPartType.get(payload.node.type) selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) @@ -360,10 +350,10 @@ function newStrategyPart () { /* Image */ - if (image !== undefined) { - if (image.canDrawIcon === true) { + if (icon !== undefined) { + if (icon.canDrawIcon === true) { browserCanvasContext.drawImage( - image, position.x - thisObject.payload.floatingObject.currentImageSize / 2, + icon, position.x - thisObject.payload.floatingObject.currentImageSize / 2, position.y - thisObject.payload.floatingObject.currentImageSize / 2, thisObject.payload.floatingObject.currentImageSize, thisObject.payload.floatingObject.currentImageSize) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index b3335ee6c..eb8fc1ce7 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -57,7 +57,6 @@ function newStrategyPartConstructor () { case 'Trading System': { floatingObject.isPinned = true floatingObject.positionLocked = true - strategyPart.imagePath = 'Images/Icons/style-01/analysis.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -126,7 +125,6 @@ function newStrategyPartConstructor () { break } case 'Strategy': { - strategyPart.imagePath = 'Images/Icons/style-01/quality.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -168,7 +166,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/startup.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -198,7 +195,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Exit Event': { - strategyPart.imagePath = 'Images/Icons/style-01/support.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -228,7 +224,6 @@ function newStrategyPartConstructor () { break } case 'Trade Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/compass.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -258,7 +253,6 @@ function newStrategyPartConstructor () { break } case 'Stop': { - strategyPart.imagePath = 'Images/Icons/style-01/pixel.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -288,7 +282,6 @@ function newStrategyPartConstructor () { break } case 'Take Profit': { - strategyPart.imagePath = 'Images/Icons/style-01/competition.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -318,7 +311,6 @@ function newStrategyPartConstructor () { break } case 'Phase': { - strategyPart.imagePath = 'Images/Icons/style-01/placeholder.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() @@ -377,7 +369,6 @@ function newStrategyPartConstructor () { break } case 'Situation': { - strategyPart.imagePath = 'Images/Icons/style-01/attractive.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -419,7 +410,6 @@ function newStrategyPartConstructor () { break } case 'Condition': { - strategyPart.imagePath = 'Images/Icons/style-01/testing.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() 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. diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 8b666a730..e4bfcca0c 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -5,6 +5,8 @@ function newStrategySpace () { sidePanel: undefined, workplace: undefined, container: undefined, + iconCollection: undefined, + iconByPartType: undefined, draw: draw, getContainer: getContainer, makeVisible: makeVisible, @@ -18,18 +20,40 @@ function newStrategySpace () { container.isDraggeable = false + thisObject.iconCollection = new Map() + thisObject.iconByPartType = new Map() + return thisObject async function initialize () { - // thisObject.sidePanel = newSidePanel() - // thisObject.sidePanel.initialize() - thisObject.workplace = newWorkspace() - // thisObject.workplace.container.connectToParent(thisObject.sidePanel.container, true, true) + thisObject.workplace.initialize() await thisObject.workplace.loadFromStrategyzer() - // thisObject.sidePanel.areas.push(thisObject.workplace) + loadIconCollection() + buildIconByPartTypeMap() + } + + function buildIconByPartTypeMap () { + const relationshipArray = [ + ['Trading System', 'analysis'], + ['Strategy', 'quality'], + ['Strategy Entry Event', 'startup'], + ['Strategy Exit Event', 'support'], + ['Trade Entry Event', 'compass'], + ['Stop', 'pixel'], + ['Take Profit', 'competition'], + ['Phase', 'placeholder'], + ['Situation', 'attractive'], + ['Condition', 'testing'] + ] + + for (let i = 0; i < relationshipArray.length; i++) { + let record = relationshipArray[i] + let icon = thisObject.iconCollection.get(record[1]) + thisObject.iconByPartType.set(record[0], icon) + } } function loadIconCollection () { @@ -86,6 +110,24 @@ function newStrategySpace () { 'vector', 'video-player' ] + + for (let i = 0; i < iconsNames.length; i++) { + let name = iconsNames[i] + loadImage(name) + } + + function loadImage (name) { + const PATH = 'Images/Icons/style-01/' + let image = new Image() + image.onload = onImageLoad + image.fileName = name + + function onImageLoad () { + image.canDrawIcon = true + } + image.src = window.canvasApp.urlPrefix + PATH + name + '.png' + thisObject.iconCollection.set(name, image) + } } function makeVisible () { From a01b7f645d8dd6eea5309b837b82caab4447ca54 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:04:56 +0200 Subject: [PATCH 164/172] Menu Item Icons not loadeed locally --- FloatingSpace/CircularMenuItem.js | 17 +--- FloatingSpace/StrategyPartConstructor.js | 112 +++++++++++------------ 2 files changed, 58 insertions(+), 71 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 53803a756..af26ef4d2 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -74,21 +74,8 @@ function newCircularMenuItem () { thisObject.payload = pPayload /* Load Menu Images */ - thisObject.iconOn = new Image() - thisObject.iconOn.onload = onOnImageLoad - - function onOnImageLoad () { - if (thisObject.imagePathOff !== undefined) { - thisObject.iconOff = new Image() - thisObject.iconOff.onload = onOffImageLoad - - function onOffImageLoad () { - thisObject.canDrawIcon = true - } - thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff - } - } - thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.imagePathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.imagePathOff) if (thisObject.currentStatus === true) { thisObject.icon = thisObject.iconOn diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index eb8fc1ce7..438b19085 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -64,8 +64,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -76,8 +76,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'Images/Icons/style-01/vector.png', - imagePathOff: 'Images/Icons/style-01/vector.png', + imagePathOn: 'vector', + imagePathOff: 'vector', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -91,8 +91,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'Images/Icons/style-01/upload.png', - imagePathOff: 'Images/Icons/style-01/upload.png', + imagePathOn: 'upload', + imagePathOff: 'upload', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -103,8 +103,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'Images/Icons/style-01/quality.png', - imagePathOff: 'Images/Icons/style-01/quality.png', + imagePathOn: 'quality', + imagePathOff: 'quality', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -115,8 +115,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/Icons/style-01/tools.png', - imagePathOff: 'Images/Icons/style-01/tools.png', + imagePathOn: 'tools', + imagePathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -132,8 +132,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -144,8 +144,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -156,8 +156,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/Icons/style-01/tools.png', - imagePathOff: 'Images/Icons/style-01/tools.png', + imagePathOn: 'tools', + imagePathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -173,8 +173,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -185,8 +185,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -202,8 +202,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -214,8 +214,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -231,8 +231,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -243,8 +243,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -260,8 +260,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -272,8 +272,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + imagePathOn: 'placeholder', + imagePathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -289,8 +289,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -301,8 +301,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + imagePathOn: 'placeholder', + imagePathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -323,8 +323,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -335,8 +335,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/Icons/style-01/html.png', - imagePathOff: 'Images/Icons/style-01/html.png', + imagePathOn: 'html', + imagePathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -347,8 +347,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -359,8 +359,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -376,8 +376,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -388,8 +388,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'Images/Icons/style-01/testing.png', - imagePathOff: 'Images/Icons/style-01/testing.png', + imagePathOn: 'testing', + imagePathOff: 'testing', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -400,8 +400,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -422,8 +422,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -434,8 +434,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/Icons/style-01/html.png', - imagePathOff: 'Images/Icons/style-01/html.png', + imagePathOn: 'html', + imagePathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -446,8 +446,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, From 6db14dfa1fe7af3d725f48d879a2fc2f6f9b325f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:26:29 +0200 Subject: [PATCH 165/172] Refactoring for icon --- FloatingSpace/CircularMenu.js | 4 +- FloatingSpace/CircularMenuItem.js | 10 +- FloatingSpace/ProfileBall.js | 20 ++-- FloatingSpace/StrategyPartConstructor.js | 112 +++++++++++------------ 4 files changed, 73 insertions(+), 73 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index f2181a6b5..2a5e3baf2 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -57,8 +57,8 @@ function newCircularMenu () { menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel menuItem.visible = menuItemInitialValue.visible - menuItem.imagePathOn = menuItemInitialValue.imagePathOn - menuItem.imagePathOff = menuItemInitialValue.imagePathOff + menuItem.iconPathOn = menuItemInitialValue.iconPathOn + menuItem.iconPathOff = menuItemInitialValue.iconPathOff menuItem.rawRadius = menuItemInitialValue.rawRadius menuItem.targetRadius = menuItemInitialValue.label menuItem.currentRadius = menuItemInitialValue.currentRadius diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index af26ef4d2..496a4d491 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -15,8 +15,8 @@ function newCircularMenuItem () { workDoneLabel: undefined, workFailedLabel: undefined, visible: false, - imagePathOn: undefined, - imagePathOff: undefined, + iconPathOn: undefined, + iconPathOff: undefined, rawRadius: undefined, targetRadius: undefined, currentRadius: undefined, @@ -74,8 +74,8 @@ function newCircularMenuItem () { thisObject.payload = pPayload /* Load Menu Images */ - thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.imagePathOn) - thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.imagePathOff) + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) if (thisObject.currentStatus === true) { thisObject.icon = thisObject.iconOn @@ -217,7 +217,7 @@ function newCircularMenuItem () { iconSize = thisObject.currentRadius } - if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { + if (thisObject.icon.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2) /* Menu Label */ diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index c940bfbd1..18b853346 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -24,8 +24,8 @@ function newProfileBall () { let ballStringMenu = [ { visible: false, - imagePathOn: 'Images/menu.icon.on.1.gif', - imagePathOff: 'Images/menu.icon.off.1.gif', + iconPathOn: 'Images/menu.icon.on.1.gif', + iconPathOff: 'Images/menu.icon.off.1.gif', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -33,8 +33,8 @@ function newProfileBall () { }/*, { visible: false, - imagePathOn: "Images/menu.icon.on.2.gif", - imagePathOff: "Images/menu.icon.off.2.gif", + iconPathOn: "Images/menu.icon.on.2.gif", + iconPathOff: "Images/menu.icon.off.2.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -42,8 +42,8 @@ function newProfileBall () { }, { visible: false, - imagePathOn: "Images/menu.icon.on.3.gif", - imagePathOff: "Images/menu.icon.off.3.gif", + iconPathOn: "Images/menu.icon.on.3.gif", + iconPathOff: "Images/menu.icon.off.3.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -51,8 +51,8 @@ function newProfileBall () { }, { visible: false, - imagePathOn: "Images/menu.icon.on.4.gif", - imagePathOff: "Images/menu.icon.off.4.gif", + iconPathOn: "Images/menu.icon.on.4.gif", + iconPathOff: "Images/menu.icon.off.4.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -73,9 +73,9 @@ function newProfileBall () { function onImageLoad () { menuItem.canDrawIcon = true } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff + menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.iconPathOff } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn + menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.iconPathOn menuItem.icon = menuItem.iconOn // The default value is ON. } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 438b19085..1fc87a391 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -64,8 +64,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -76,8 +76,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'vector', - imagePathOff: 'vector', + iconPathOn: 'vector', + iconPathOff: 'vector', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -91,8 +91,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'upload', - imagePathOff: 'upload', + iconPathOn: 'upload', + iconPathOff: 'upload', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -103,8 +103,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'quality', - imagePathOff: 'quality', + iconPathOn: 'quality', + iconPathOff: 'quality', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -115,8 +115,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'tools', - imagePathOff: 'tools', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -132,8 +132,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -144,8 +144,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -156,8 +156,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'tools', - imagePathOff: 'tools', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -173,8 +173,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -185,8 +185,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -202,8 +202,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -214,8 +214,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -231,8 +231,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -243,8 +243,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -260,8 +260,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -272,8 +272,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'placeholder', - imagePathOff: 'placeholder', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -289,8 +289,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -301,8 +301,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'placeholder', - imagePathOff: 'placeholder', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -323,8 +323,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -335,8 +335,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'html', - imagePathOff: 'html', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -347,8 +347,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -359,8 +359,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -376,8 +376,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -388,8 +388,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'testing', - imagePathOff: 'testing', + iconPathOn: 'testing', + iconPathOff: 'testing', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -400,8 +400,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -422,8 +422,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -434,8 +434,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'html', - imagePathOff: 'html', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -446,8 +446,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, From 4f469bc28faff6462c17f2a5d1757a1fd7977a3c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:28:49 +0200 Subject: [PATCH 166/172] Fine tuning text position --- FloatingSpace/StrategyPart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b662e24dc..9da4db4c8 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -258,7 +258,7 @@ function newStrategyPart () { } labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 } @@ -361,3 +361,4 @@ function newStrategyPart () { } } } + From f045312dcb0b6f6434f04e4cfab3b4cf5c5e1eca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:46:12 +0200 Subject: [PATCH 167/172] Menu Item Ready to get the icons dinamically --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 23 ++++++++++++++--------- FloatingSpace/StrategyPartConstructor.js | 8 ++++++++ 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 2a5e3baf2..d79c9c099 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -64,6 +64,7 @@ function newCircularMenu () { menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle menuItem.currentStatus = menuItemInitialValue.currentStatus + menuItem.relatedStrategyPart = menuItemInitialValue.relatedStrategyPart if (menuItem.label === undefined) { menuItem.type = 'Icon Only' diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 496a4d491..30553ac7a 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -23,6 +23,7 @@ function newCircularMenuItem () { angle: undefined, container: undefined, payload: undefined, + relatedStrategyPart: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, @@ -72,16 +73,8 @@ function newCircularMenuItem () { function initialize (pPayload) { thisObject.payload = pPayload - /* Load Menu Images */ - thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) - thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) - - if (thisObject.currentStatus === true) { - thisObject.icon = thisObject.iconOn - } else { - thisObject.icon = thisObject.iconOff - } + iconPhysics() selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -130,6 +123,18 @@ function newCircularMenuItem () { backgroundColorToUse = defaultBackgroudColor } + iconPhysics() + } + + function iconPhysics () { + if (thisObject.relatedStrategyPart !== undefined) { + thisObject.iconOn = canvas.strategySpace.iconByPartType.get(thisObject.relatedStrategyPart) + thisObject.iconOff = canvas.strategySpace.iconByPartType.get(thisObject.relatedStrategyPart) + } else { + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) + } + /* Current Status sets the icon to be used */ if (thisObject.currentStatus === true) { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 1fc87a391..a4715cd3b 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -105,6 +105,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'quality', iconPathOff: 'quality', + relatedStrategyPart: 'Strategy', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -187,6 +188,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -216,6 +218,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -245,6 +248,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -274,6 +278,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'placeholder', iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -303,6 +308,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'placeholder', iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -349,6 +355,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -390,6 +397,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'testing', iconPathOff: 'testing', + relatedStrategyPart: 'Condition', rawRadius: 8, targetRadius: 0, currentRadius: 0, From d92455804f7e5d4d2d6b7fc57c98829465828513 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:48:14 +0200 Subject: [PATCH 168/172] strategy part also with iconPhysics --- FloatingSpace/StrategyPart.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 9da4db4c8..3d07e5eda 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -83,7 +83,7 @@ function newStrategyPart () { /* Load Part Image */ - icon = canvas.strategySpace.iconByPartType.get(payload.node.type) + iconPhysics() selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) @@ -126,6 +126,12 @@ function newStrategyPart () { thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y } + + iconPhysics() + } + + function iconPhysics () { + icon = canvas.strategySpace.iconByPartType.get(payload.node.type) } function onFocus () { @@ -361,4 +367,3 @@ function newStrategyPart () { } } } - From 011c870ed67ef601aa488472f73abf50d66fd8bf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 16:14:25 +0200 Subject: [PATCH 169/172] Refactoring to Cockpit Space --- Canvas.js | 65 ++++++---------------- ChartsSpace/ViewPort.js | 4 +- {BottomSpace => CockpitSpace}/UIControl.js | 0 Globals.js | 4 +- Project.njsproj | 10 ++-- Scales/TimePeriodScale.js | 2 +- Spaces/ChartSpace.js | 11 ++-- Spaces/{BottomSpace.js => CockpitSpace.js} | 15 +++-- Spaces/FloatingSpace.js | 6 +- TopSpace/CurrentEvent.js | 2 +- TopSpace/EndUser.js | 2 +- TopSpace/Login.js | 2 +- 12 files changed, 44 insertions(+), 79 deletions(-) rename {BottomSpace => CockpitSpace}/UIControl.js (100%) rename Spaces/{BottomSpace.js => CockpitSpace.js} (96%) diff --git a/Canvas.js b/Canvas.js index 970b151fb..3bc45b757 100644 --- a/Canvas.js +++ b/Canvas.js @@ -36,6 +36,7 @@ function newCanvas () { chartSpace: undefined, floatingSpace: undefined, panelsSpace: undefined, + cockpitSpace: undefined, bottomSpace: undefined, strategySpace: undefined, animation: undefined, @@ -49,41 +50,6 @@ function newCanvas () { 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.') } @@ -128,8 +94,8 @@ function newCanvas () { thisObject.strategySpace = newStrategySpace() await thisObject.strategySpace.initialize() - thisObject.bottomSpace = newBottomSpace() - thisObject.bottomSpace.initialize() + thisObject.cockpitSpace = newCockpitSpace() + thisObject.cockpitSpace.initialize() thisObject.panelsSpace = newPanelsSpace() thisObject.panelsSpace.initialize() @@ -140,6 +106,8 @@ function newCanvas () { thisObject.chartSpace = newChartSpace() thisObject.chartSpace.initialize(onCharSpaceInitialized) + thisObject.bottomSpace = thisObject.cockpitSpace + function onCharSpaceInitialized (err) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } @@ -174,8 +142,8 @@ 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('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.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) @@ -334,9 +302,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isDraggeable === true) { containerBeingDragged = container @@ -425,9 +393,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -583,10 +551,10 @@ function newCanvas () { } } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - if (thisObject.bottomSpace !== undefined) { - container = thisObject.bottomSpace.getContainer(point) + if (thisObject.cockpitSpace !== undefined) { + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -665,9 +633,9 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* We try the Bottom Space. */ + /* We try the CockpitSpace. */ - container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.cockpitSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) @@ -760,4 +728,3 @@ function newCanvas () { } } } - diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js index e3d4ee247..264c5b07b 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 = 20 + BOTTOM_SPACE_HEIGHT + let BOTTOM_MARGIN = 20 + COCKPIT_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 = 20 + browserCanvas.height - BOTTOM_SPACE_POSITION + BOTTOM_MARGIN = 20 + browserCanvas.height - COCKPIT_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { diff --git a/BottomSpace/UIControl.js b/CockpitSpace/UIControl.js similarity index 100% rename from BottomSpace/UIControl.js rename to CockpitSpace/UIControl.js diff --git a/Globals.js b/Globals.js index 039d5dbcd..3261d18fd 100644 --- a/Globals.js +++ b/Globals.js @@ -163,10 +163,10 @@ 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 = 40; +const COCKPIT_SPACE_HEIGHT = 40; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 -let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT +let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Project.njsproj b/Project.njsproj index 4634a91ad..7cc00eb05 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -32,13 +32,13 @@ - + Code Code - + Code @@ -85,7 +85,7 @@ Code - + Code @@ -112,7 +112,7 @@ Code - + Code @@ -177,7 +177,7 @@ - + diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index ab3712520..55ba9a6b8 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -187,7 +187,7 @@ to be visible at the top of the viewPort. */ /* Lets start the drawing. */ - let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT + let displacement = viewPort.margins.BOTTOM - COCKPIT_SPACE_HEIGHT /* browserCanvasContext.beginPath() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 39b9ac34b..2af37d1d0 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -117,8 +117,8 @@ function newChartSpace () { 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 > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2 } if (point.y < 0) { @@ -137,7 +137,7 @@ function newChartSpace () { return false } - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { return false } @@ -149,7 +149,7 @@ function newChartSpace () { } function physics () { - thisObject.container.frame.height = BOTTOM_SPACE_POSITION + thisObject.container.frame.height = COCKPIT_SPACE_POSITION if (thisObject.container.frame.height <= 0 / 100) { thisObject.visible = false @@ -180,7 +180,7 @@ function newChartSpace () { let toPoint = { x: browserCanvas.width, - y: BOTTOM_SPACE_POSITION + y: COCKPIT_SPACE_POSITION } browserCanvasContext.beginPath() @@ -199,4 +199,3 @@ function newChartSpace () { } } } - diff --git a/Spaces/BottomSpace.js b/Spaces/CockpitSpace.js similarity index 96% rename from Spaces/BottomSpace.js rename to Spaces/CockpitSpace.js index 3bee0df9d..c84447c60 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,6 +1,6 @@ - function newBottomSpace () { - const MODULE_NAME = 'Bottom Space' + function newCockpitSpace () { + const MODULE_NAME = 'CockpitSpace' const ERROR_LOG = true let thisObject = { @@ -49,10 +49,10 @@ function resize () { thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT } function physics () { @@ -67,8 +67,8 @@ 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 + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) { + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.status = 'BOTTOM' canvas.strategySpace.makeInvisible() } else { @@ -83,7 +83,7 @@ canvas.panelsSpace.visible = true } - BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y + COCKPIT_SPACE_POSITION = thisObject.container.frame.position.y viewPort.resize() } @@ -305,4 +305,3 @@ browserCanvasContext.stroke() } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 32752e594..1c9aeb5dd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -79,8 +79,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT } if (point.y > browserCanvas.height) { @@ -99,7 +99,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { return false } diff --git a/TopSpace/CurrentEvent.js b/TopSpace/CurrentEvent.js index 81a5c92d3..b2831e277 100644 --- a/TopSpace/CurrentEvent.js +++ b/TopSpace/CurrentEvent.js @@ -70,7 +70,7 @@ function newCurrentEvent () { thisObject.container = container thisObject.container.frame.width = 150 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT resize() diff --git a/TopSpace/EndUser.js b/TopSpace/EndUser.js index 6edaf5b44..b8699eb69 100644 --- a/TopSpace/EndUser.js +++ b/TopSpace/EndUser.js @@ -12,7 +12,7 @@ function newEndUser () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT diff --git a/TopSpace/Login.js b/TopSpace/Login.js index 7d242191c..61aa996c1 100644 --- a/TopSpace/Login.js +++ b/TopSpace/Login.js @@ -19,7 +19,7 @@ function newLogin () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT From cb60bf2e90220327ea627b61cb159a0517cede6b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 17:14:59 +0200 Subject: [PATCH 170/172] Controls showing up again, now as part of the cockpit --- CockpitSpace/AssetBalances.js | 122 ++++++++++++++++++ CockpitSpace/Speedometer.js | 236 ++++++++++++++++++++++++++++++++++ CockpitSpace/UIControl.js | 55 -------- Spaces/CockpitSpace.js | 98 ++------------ 4 files changed, 371 insertions(+), 140 deletions(-) create mode 100644 CockpitSpace/AssetBalances.js create mode 100644 CockpitSpace/Speedometer.js delete mode 100644 CockpitSpace/UIControl.js diff --git a/CockpitSpace/AssetBalances.js b/CockpitSpace/AssetBalances.js new file mode 100644 index 000000000..5b7db2c35 --- /dev/null +++ b/CockpitSpace/AssetBalances.js @@ -0,0 +1,122 @@ + +function newAssetBalances () { + const MODULE_NAME = 'Asset Balances' + + let thisObject = { + visible: true, + container: undefined, + paramsArray: undefined, + setParamsArray: setParamsArray, + physics: physics, + draw: draw, + speedometers: [], + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + + return thisObject + + function finalize () { + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.finalize() + } + thisObject.container.finalize() + thisObject.container = undefined + thisObject.paramsArray = undefined + } + + function initialize () { + for (let i = 0; i < 2; i++) { + let speedometer = newSpeedometer() + + speedometer.container.frame.position.x = thisObject.container.frame.width / 2 - speedometer.container.frame.width / 2 + speedometer.container.frame.position.y = thisObject.container.frame.height / 2 - speedometer.container.frame.height / 2 + + speedometer.initialize() + thisObject.speedometers.push(speedometer) + } + } + + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + let container + for (let i = 0; i < thisObject.speedometers.length; i++) { + container = thisObject.speedometers[i].getContainer(point, purpose) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return container + } + } + } + } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function setParamsArray (paramsArray) { + thisObject.paramsArray = paramsArray + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.params = paramsArray[i] + } + } + + function physics () { + + } + + function draw () { + if (thisObject.visible !== true) { return } + + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.draw() + } + + drawAssetBalances() + } + + function drawAssetBalances () { + if (thisObject.paramsArray === undefined) { return } + + let fontSize + let label + let xOffset + let yOffset + + const OPACITY = 1 + + /* We put the params.VALUE in the middle */ + + fontSize = 15 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = 'ASSET BALANCES' + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + yOffset = -45 + + labelPoint = { + x: 0 - xOffset + (thisObject.paramsArray[1].LEFT_OFFSET - thisObject.paramsArray[0].LEFT_OFFSET) / 2 + thisObject.paramsArray[0].LEFT_OFFSET - 20, + y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } +} diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js new file mode 100644 index 000000000..afa2b1204 --- /dev/null +++ b/CockpitSpace/Speedometer.js @@ -0,0 +1,236 @@ + +function newSpeedometer () { + const MODULE_NAME = 'Speedometer' + + let thisObject = { + visible: true, + container: undefined, + params: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + + return thisObject + + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + thisObject.params = undefined + } + + function initialize () { + + } + + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + + } + + function draw () { + if (thisObject.params === undefined) { return } + drawAssetCircle() + } + + function drawAssetCircle () { + const RED_LINE_HIGHT = 5 + const RADIOUS = 50 + const OPACITY = 1 + + let centerPoint = { + x: thisObject.params.LEFT_OFFSET, + y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 + } + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.85 * Math.PI, 2.15 * 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.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.fill() + + /* We draw the circle bar */ + + const DEFAULT_THICKNESS = 2 + const VALUE_THICKNESS = 8 + const VALUE_BG_THICKNESS = 1 + const BAR_RADIOUS = RADIOUS * 0.85 + + let BAR_START_ANGLE = 0.85 * Math.PI + let BAR_END_ANGLE = 2.15 * Math.PI + let CURRENT_VALUE_ANGLE = thisObject.params.VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let MIN_VALUE_ANGLE = thisObject.params.MIN_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let INIT_VALUE_ANGLE = thisObject.params.INIT_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let PROFIT_VALUE_ANGLE = CURRENT_VALUE_ANGLE + + if (CURRENT_VALUE_ANGLE > INIT_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = INIT_VALUE_ANGLE } + + if (thisObject.params.VALUE > 0) { + browserCanvasContext.setLineDash([0, 0]) + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + } + + browserCanvasContext.setLineDash([2, 3]) + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + } + } + + /* Common Variables */ + + let fontSize + let label + let xOffset + let yOffset + + /* We put the thisObject.params.VALUE in the middle */ + + fontSize = 22 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = thisObject.params.VALUE + if (isNaN(label) === false) { + label = Number(label) + if (label === 0) { label = label.toFixed(2) } else { label = label.toLocaleString() } + } + + label = label.substring(0, 5) + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7 + + labelPoint = { + x: centerPoint.x - xOffset, + y: centerPoint.y + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + + /* We put the top label */ + + fontSize = 12 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = thisObject.params.ASSET_LABEL + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3 + yOffset = 22 + + labelPoint = { + x: centerPoint.x - xOffset, + y: centerPoint.y - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + + /* We put the bottom label */ + + fontSize = 12 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = thisObject.params.ASSET_NAME + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3 + yOffset = -15 + + labelPoint = { + x: centerPoint.x - xOffset, + y: centerPoint.y - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } +} diff --git a/CockpitSpace/UIControl.js b/CockpitSpace/UIControl.js deleted file mode 100644 index 515640b31..000000000 --- a/CockpitSpace/UIControl.js +++ /dev/null @@ -1,55 +0,0 @@ -function newUIControl () { - let thisObject = { - drawFunction: undefined, - paramsArray: undefined, - container: undefined, - draw: draw, - parentContainer: undefined, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - } - - let isInitialized = false - /* Cointainer stuff */ - - let container = newContainer() - - container.name = 'UI Control' - container.initialize() - - container.isClickeable = true - - thisObject.container = container - thisObject.container.frame.containerName = 'Panel Tab Button' - - return thisObject - - function initialize () { - isInitialized = true - } - - function draw () { - if (isInitialized === false) { return } - - if (thisObject.drawFunction !== undefined && thisObject.paramsArray !== undefined) { - thisObject.drawFunction(thisObject.paramsArray) - } - } - - function getContainer (point) { - let container - - /* First we check if thisObject point is inside thisObject space. */ - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - /* Now we see which is the inner most container that has it */ - - return thisObject.container - } else { - /* This point does not belong to thisObject space. */ - - return undefined - } - } -} - diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index c84447c60..a6b7b8fae 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,17 +1,14 @@ function newCockpitSpace () { const MODULE_NAME = 'CockpitSpace' - const ERROR_LOG = true let thisObject = { container: undefined, status: 'BOTTOM', + assetBalances: undefined, draw: draw, physics: physics, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - createNewControl: createNewControl, - destroyControl: destroyControl, - getControl: getControl, + getContainer: getContainer, finalize: finalize, initialize: initialize } @@ -36,15 +33,19 @@ thisObject.container.finalize() thisObject.container = undefined + thisObject.assetBalances = undefined } function initialize () { canvasBrowserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + + thisObject.assetBalances = newAssetBalances() + thisObject.assetBalances.initialize() } function onMouseClick (event) { - // canvas.strategySpace.tradingSystemWorkspace.showUp() + } function resize () { @@ -87,71 +88,12 @@ viewPort.resize() } - function createNewControl (pType, pDrawFunction, pOwner) { - let control - - switch (pType) { - - case 'Over The Line': - { - control = newUIControl() - control.initialize() - control.drawFunction = pDrawFunction - break - } - } - - let controlArray = controlsMap.get(pOwner) - if (controlArray === undefined) { - controlArray = [] - controlsMap.set(pOwner, controlArray) - } - - controlArray.push(control) - - control.handle = Math.floor((Math.random() * 10000000) + 1) - - return control.handle - } - - 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 - } - } - } - - 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 - } - } - } - } - - 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] - - if (control.handle === pControlHandle) { - return control - } - } - } - } - function getContainer (point) { + let container = thisObject.assetBalances.getContainer(point) + if (container !== undefined) { + return container + } + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { @@ -164,21 +106,7 @@ drawBackground() - 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.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() - } - } + thisObject.assetBalances.draw() } function drawBackground () { From 407d13d299688d05bf9cc6e7791bc93ef179b34d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 17:46:18 +0200 Subject: [PATCH 171/172] BUG strategy space not showing fixed --- FloatingSpace/StrategyPart.js | 2 +- Spaces/CockpitSpace.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3d07e5eda..aab937faa 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -131,7 +131,7 @@ function newStrategyPart () { } function iconPhysics () { - icon = canvas.strategySpace.iconByPartType.get(payload.node.type) + icon = canvas.strategySpace.iconByPartType.get(thisObject.payload.node.type) } function onFocus () { diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index a6b7b8fae..eb1872cd6 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -89,11 +89,6 @@ } function getContainer (point) { - let container = thisObject.assetBalances.getContainer(point) - if (container !== undefined) { - return container - } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { From 4b812349af9c82f38fd4008843a6d319b2d0b193 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 19:08:08 +0200 Subject: [PATCH 172/172] New Turquise color --- CockpitSpace/Speedometer.js | 3 ++- Globals.js | 4 +++- Spaces/CockpitSpace.js | 3 ++- Utilities.js | 15 --------------- 4 files changed, 7 insertions(+), 18 deletions(-) diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js index afa2b1204..e93c434ba 100644 --- a/CockpitSpace/Speedometer.js +++ b/CockpitSpace/Speedometer.js @@ -71,7 +71,7 @@ function newSpeedometer () { browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')' browserCanvasContext.fill() /* We draw the circle bar */ @@ -234,3 +234,4 @@ function newSpeedometer () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } + diff --git a/Globals.js b/Globals.js index 3261d18fd..7fb404879 100644 --- a/Globals.js +++ b/Globals.js @@ -28,7 +28,9 @@ UI_COLOR = { RED: "223, 70, 60", PATINATED_TURQUOISE: "27,153,139", TITANIUM_YELLOW: "244,228,9", - MANGANESE_PURPLE: "91,80,122" + MANGANESE_PURPLE: "91,80,122", + TURQUOISE: "74,207,217", + DARK_TURQUOISE: "2,149,170" }; /* User Interface Fonts */ diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index eb1872cd6..29096fa78 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -118,7 +118,7 @@ browserCanvasContext.beginPath() browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -228,3 +228,4 @@ browserCanvasContext.stroke() } } + diff --git a/Utilities.js b/Utilities.js index 8f38d99d8..a72310054 100644 --- a/Utilities.js +++ b/Utilities.js @@ -154,21 +154,6 @@ function removeTime (datetime) { return dateOnly } -function loadEmoji (pPath) { - let newImage - - newImage = new Image() - newImage.onload = onImageLoaded - - function onImageLoaded () { - newImage.isLoaded = true - } - - newImage.src = window.canvasApp.urlPrefix + 'Images/Emoji/' + pPath - - return newImage -} - function printLabel (labelToPrint, x, y, opacity, fontSize) { let labelPoint