diff --git a/BottomSpace/UIControl.js b/BottomSpace/UIControl.js deleted file mode 100644 index 515640b31..000000000 --- a/BottomSpace/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/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/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..e93c434ba --- /dev/null +++ b/CockpitSpace/Speedometer.js @@ -0,0 +1,237 @@ + +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_TURQUOISE + ', ' + 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/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index f2181a6b5..d79c9c099 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -57,13 +57,14 @@ 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 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 53803a756..30553ac7a 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -15,14 +15,15 @@ function newCircularMenuItem () { workDoneLabel: undefined, workFailedLabel: undefined, visible: false, - imagePathOn: undefined, - imagePathOff: undefined, + iconPathOn: undefined, + iconPathOff: undefined, rawRadius: undefined, targetRadius: undefined, currentRadius: undefined, angle: undefined, container: undefined, payload: undefined, + relatedStrategyPart: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, @@ -72,29 +73,8 @@ function newCircularMenuItem () { function initialize (pPayload) { 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 - - 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) @@ -143,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) { @@ -230,7 +222,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/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3bd8d5f24..aab937faa 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 - } + iconPhysics() selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) @@ -136,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(thisObject.payload.node.type) } function onFocus () { @@ -268,7 +264,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 } @@ -360,10 +356,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..a4715cd3b 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', @@ -65,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', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -77,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', + iconPathOn: 'vector', + iconPathOff: 'vector', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -92,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', + iconPathOn: 'upload', + iconPathOff: 'upload', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -104,8 +103,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'Images/Icons/style-01/quality.png', - imagePathOff: 'Images/Icons/style-01/quality.png', + iconPathOn: 'quality', + iconPathOff: 'quality', + relatedStrategyPart: 'Strategy', 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', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -126,7 +126,6 @@ function newStrategyPartConstructor () { break } case 'Strategy': { - strategyPart.imagePath = 'Images/Icons/style-01/quality.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -134,8 +133,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -146,8 +145,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', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -158,8 +157,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/Icons/style-01/tools.png', - imagePathOff: 'Images/Icons/style-01/tools.png', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -168,7 +167,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/startup.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -176,8 +174,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -188,8 +186,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + iconPathOn: 'attractive', + iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -198,7 +197,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Exit Event': { - strategyPart.imagePath = 'Images/Icons/style-01/support.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -206,8 +204,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -218,8 +216,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + iconPathOn: 'attractive', + iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -228,7 +227,6 @@ function newStrategyPartConstructor () { break } case 'Trade Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/compass.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -236,8 +234,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -248,8 +246,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + iconPathOn: 'attractive', + iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -258,7 +257,6 @@ function newStrategyPartConstructor () { break } case 'Stop': { - strategyPart.imagePath = 'Images/Icons/style-01/pixel.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -266,8 +264,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -278,8 +276,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -288,7 +287,6 @@ function newStrategyPartConstructor () { break } case 'Take Profit': { - strategyPart.imagePath = 'Images/Icons/style-01/competition.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -296,8 +294,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -308,8 +306,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -318,7 +317,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() @@ -331,8 +329,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -343,8 +341,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', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -355,8 +353,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + iconPathOn: 'attractive', + iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -367,8 +366,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', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -377,7 +376,6 @@ function newStrategyPartConstructor () { break } case 'Situation': { - strategyPart.imagePath = 'Images/Icons/style-01/attractive.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -385,8 +383,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -397,8 +395,9 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'Images/Icons/style-01/testing.png', - imagePathOff: 'Images/Icons/style-01/testing.png', + iconPathOn: 'testing', + iconPathOff: 'testing', + relatedStrategyPart: 'Condition', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -409,8 +408,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', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -419,7 +418,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() @@ -432,8 +430,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -444,8 +442,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', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -456,8 +454,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', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, diff --git a/Globals.js b/Globals.js index 77d9ed28c..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 */ @@ -121,8 +123,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. @@ -163,10 +165,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 68% rename from Spaces/BottomSpace.js rename to Spaces/CockpitSpace.js index 3bee0df9d..29096fa78 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,17 +1,14 @@ - function newBottomSpace () { - const MODULE_NAME = 'Bottom Space' - const ERROR_LOG = true + function newCockpitSpace () { + const MODULE_NAME = 'CockpitSpace' 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,23 +33,27 @@ 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 () { 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 +68,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,74 +84,10 @@ canvas.panelsSpace.visible = true } - BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y + COCKPIT_SPACE_POSITION = thisObject.container.frame.position.y 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) { if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container @@ -164,21 +101,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 () { @@ -195,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() 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/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 () { 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 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