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/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/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/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 0f83cf7e8..01ba5ab27 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' @@ -61,7 +63,7 @@ function newFloatingLayer () { let dyingFloatingObjects = [] - let maxTargetRepulsionForce = 0.003 + let maxTargetRepulsionForce = 0.001 let currentHandle = 0 return thisObject @@ -78,17 +80,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) { @@ -218,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 } @@ -347,6 +356,11 @@ function newFloatingLayer () { break } + case 'Strategy Part': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible + break + } default: { break } @@ -489,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: { @@ -551,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 } @@ -776,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 } @@ -999,4 +1025,3 @@ function newFloatingLayer () { } } } - diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6afa87e03..20aab6a21 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.') } @@ -89,7 +89,20 @@ function newFloatingObject () { } break } + + case 'Strategy Part': { + underlayingObject = newStrategyPart() + underlayingObject.initialize(floatingLayer, 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 } } @@ -121,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() } 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/NoteSets.js b/FloatingSpace/NoteSets.js index d3e2ce42e..f341d8aab 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) { @@ -232,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/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/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index de67bfca6..65a0e4a95 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 = { @@ -35,22 +35,13 @@ 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) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', onInitialized) + floatingObject.initialize('Profile Ball', floatingLayer, onInitialized) function onInitialized (err) { floatingObject.payload = pPayload @@ -67,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/StrategyPart.js b/FloatingSpace/StrategyPart.js new file mode 100644 index 000000000..41bea693e --- /dev/null +++ b/FloatingSpace/StrategyPart.js @@ -0,0 +1,333 @@ + +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 + } + ] + + let floatingLayer + let isMouseOver = false + + return thisObject + + function initialize (pFloatingLayer, callBackFunction) { + floatingLayer = pFloatingLayer + + 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 * 2.5 + } + + isMouseOver = true + } + + function onMouseNotOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 + } + + isMouseOver = false + } + + 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) { + /* 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 + } + + 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 * 2 / 3, 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 && 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 + } + + 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..ae0d78a8a --- /dev/null +++ b/FloatingSpace/StrategyParts.js @@ -0,0 +1,155 @@ + +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) { + floatingLayer = pFloatingLayer + } + + function createNewStrategyPart (type, pPayload, callBackFunction) { + let floatingObject = newFloatingObject() + floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) + + function onInitialized (err) { + const FRICTION = 0.97 + floatingObject.payload = pPayload + + 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) } + } + } + + function level_1 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(100) + floatingObject.initializeRadius(60) + floatingObject.initializeImageSize(110) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + } + + function level_2 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(50) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' + } + + function level_3 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + } + + function level_4 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(35) + floatingObject.initializeImageSize(60) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)' + } + + function level_5 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)' + } + + floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + floatingLayer.addFloatingObject(floatingObject) + + callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) + } + } + + function destroyStrategyPart (pFloatingObjectHandle) { + floatingLayer.killFloatingObject(pFloatingObjectHandle) + } +} 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/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/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/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) } } + 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/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/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/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..2069ae1dc 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 @@ -181,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}) }) @@ -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..8add4cea7 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -17,10 +17,12 @@ function newStrategyCollectionItem () { thisObject.container.isClickeable = true thisObject.container.isDraggeable = false + let visible = false + 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 @@ -37,12 +39,216 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { + 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 (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 + }, + notes: [] + } + + let imageId // 'My Image.png' + + 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' + payload.parentNode = parentNode + + node.payload = payload + + canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated) + + function onStrategyPartCreated (err, pPartHandle) { + node.handle = pPartHandle + } + } + + 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, '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, '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, '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, '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, '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) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { return undefined @@ -56,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.BLACK + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() } function text () { 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 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() }