diff --git a/BottomSpace/ChartAspectRatio.js b/BottomSpace/ChartAspectRatio.js deleted file mode 100644 index 599fb97d2..000000000 --- a/BottomSpace/ChartAspectRatio.js +++ /dev/null @@ -1,115 +0,0 @@ - function newChartAspectRatio () { - let thisObject = { - aspectRatio: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize - } - - let container = newContainer() - container.initialize() - thisObject.container = container - - thisObject.container.frame.width = 50 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT - - resize() - - container.isDraggeable = false - container.isClickeable = false - container.isWheelable = true - - thisObject.aspectRatio = {} - - const INITIAL_Y_ASPECT_RATIO = 5 / 10 - const MIN_Y_ASPECT_RATIO = 1 / 10 - const MAX_Y_ASPECT_RATIO = 10 / 10 - - thisObject.aspectRatio.x = 1 - thisObject.aspectRatio.y = INITIAL_Y_ASPECT_RATIO - - canDrawIcon = false - - return thisObject - - function initialize () { - icon = new Image() - - icon.onload = onImageLoad - - function onImageLoad () { - canDrawIcon = true - } - - icon.src = window.canvasApp.urlPrefix + 'Images/Icons/chart-scale.png' - - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) - - window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) - } - - function resize () { - container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width - container.frame.position.y = viewPort.visibleArea.bottomLeft.y - } - - function onMouseWheel (event) { - delta = event.wheelDelta - - if (viewPort.isMinZoom() === false) { return } // We only make this button to work at the min zoom level. - - if (delta < 0) { - delta = -0.1 - } else { - delta = 0.1 - } - - thisObject.aspectRatio.y = thisObject.aspectRatio.y + delta - thisObject.aspectRatio.y = Math.round(thisObject.aspectRatio.y * 100) / 100 - - if (thisObject.aspectRatio.y < MIN_Y_ASPECT_RATIO) { - thisObject.aspectRatio.y = MIN_Y_ASPECT_RATIO - } - - if (thisObject.aspectRatio.y > MAX_Y_ASPECT_RATIO) { - thisObject.aspectRatio.y = MAX_Y_ASPECT_RATIO - } - - thisObject.container.eventHandler.raiseEvent('Chart Aspect Ratio Changed', thisObject.aspectRatio) - } - - 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 - } - } - - function draw () { - thisObject.container.frame.draw(false, false) - - if (canDrawIcon === false) { return } - if (viewPort.isMinZoom() === false) { return } // We only show this button at the min zoom level. - - let breakpointsHeight = 15 - - let imageHeight = 15 - let imageWidth = 15 - - let imagePoint = { - x: 10, - y: thisObject.container.frame.height / 2 - imageHeight / 2 + breakpointsHeight - } - - imagePoint = thisObject.container.frame.frameThisPoint(imagePoint) - - browserCanvasContext.drawImage(icon, imagePoint.x, imagePoint.y, imageWidth, imageHeight) - } - } diff --git a/EventHandler.js b/EventHandler.js index 9a242b190..89f100d9e 100644 --- a/EventHandler.js +++ b/EventHandler.js @@ -28,6 +28,10 @@ function newEventHandler () { } function stopListening (pEventType, pHandler) { + if (pHandler === undefined) { + pHandler = 'Anonymous Function' + } + if (thisObject.name !== undefined && CONSOLE_LOG === true) { console.log('Event Handler named ' + thisObject.name + ' received a request to stop listening to an the event ' + pEventType + ' with this handler: ' + pHandler) } @@ -37,14 +41,24 @@ function newEventHandler () { let eventType = record[0] let handler = record[1] - if (pEventType === eventType && pHandler.toString() === handler.toString()) { - eventHandlers.splice(i, 1) + if (pHandler === 'Anonymous Function') { + if (pEventType === eventType) { + eventHandlers.splice(i, 1) - if (thisObject.name !== undefined && CONSOLE_LOG === true) { - console.log('Evethandler found and deleted.') + if (thisObject.name !== undefined && CONSOLE_LOG === true) { + console.log('Evethandler found and deleted.') + } + return } + } else { + if (pEventType === eventType && pHandler.toString() === handler.toString()) { + eventHandlers.splice(i, 1) - return + if (thisObject.name !== undefined && CONSOLE_LOG === true) { + console.log('Evethandler found and deleted.') + } + return + } } } } diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 506460406..a6c97f8a5 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -76,7 +76,7 @@ let bot = devTeam.bots[j] if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } - if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== 'AAVikings' && devTeam.codeName !== userTeam.slug)) { continue } + if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue } if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { diff --git a/PlottersManager.js b/PlottersManager.js index bb4760a88..b73fbc704 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -111,36 +111,6 @@ function newPlottersManager () { initializeCompetitionPlotters(onCompetitionPlottersInitialized) - canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged) - - function onAspectRatioChanged (pAspectRatio) { - thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y - - /* First the Product Plotters. */ - - for (let i = 0; i < productPlotters.length; i++) { - let productPlotter = productPlotters[i] - productPlotter.plotter.container.frame.width = thisObject.container.frame.width - productPlotter.plotter.container.frame.height = thisObject.container.frame.height - - if (productPlotter.plotter.recalculateScale !== undefined) { - productPlotter.plotter.recalculateScale() - } - } - - /* Then the competition plotters. */ - - for (let i = 0; i < competitionPlotters.length; i++) { - let competitionPlotter = competitionPlotters[i] - competitionPlotter.plotter.container.frame.width = thisObject.container.frame.width - competitionPlotter.plotter.container.frame.height = thisObject.container.frame.height - - if (competitionPlotter.plotter.recalculateScale !== undefined) { - competitionPlotter.plotter.recalculateScale() - } - } - } - function onCompetitionPlottersInitialized (err) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCompetitionPlottersInitialized -> Entering function.') } diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js index cfa0f4304..3ceb3bd35 100644 --- a/Scales/ChartGrid.js +++ b/Scales/ChartGrid.js @@ -19,13 +19,10 @@ container.isDraggeable = false container.isClickeable = true - let rigthScale - return thisObject function initialize () { - rigthScale = newRigthScale() - rigthScale.initialize() + } function getContainer (point) { @@ -47,6 +44,8 @@ } function draw (container, timeLineCoordinateSystem) { + return // not for now + rightScaleBackground() leftScaleBackground() @@ -56,7 +55,7 @@ const basePeriod = { x: 8 * 60 * 60 * 1000, - y: timeLineCoordinateSystem.max.y / 1000 / canvas.bottomSpace.chartAspectRatio.aspectRatio.y + y: timeLineCoordinateSystem.max.y / 1000 } let period = { diff --git a/Scales/RightScale.js b/Scales/RightScale.js index ec5e4f7cb..bd7ecc144 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -1,40 +1,77 @@ function newRigthScale () { + const MODULE_NAME = 'Right Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + let thisObject = { container: undefined, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + heightPercentage: 100 } + const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 const RIGHT_MARGIN = 50 + const STEP_SIZE = 5 - let container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.frame.width = RIGHT_MARGIN thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y - container.frame.position.x = viewPort.visibleArea.bottomRight.x - container.frame.position.y = TOP_SPACE_HEIGHT + thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x + thisObject.container.frame.position.y = TOP_SPACE_HEIGHT - container.isDraggeable = false - container.isClickeable = false - container.isWheelable = true + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true + + let mouse = { + position: { + x: 0, + y: 0 + } + } return thisObject function initialize () { thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.heightPercentage) { + thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE + } else { + thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage) + } + + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + mouse.position.x = event.x + mouse.position.y = event.y + }) } function onMouseWheel (event) { delta = event.wheelDelta if (delta < 0) { - delta = -0.1 + thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE + if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE } } else { - delta = 0.1 + thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE + if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } } + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) } function getContainer (point) { @@ -43,7 +80,7 @@ /* First we check if this point is inside this object UI. */ if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container + return thisObject.container } else { /* This point does not belong to this space. */ @@ -52,6 +89,55 @@ } function draw () { + drawBackground() + drawLabel() + } + function drawBackground () { + const RIGHT_MARGIN = 50 + + /* We will paint some transparent background here. */ + + let opacity = '0.95' + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + + browserCanvasContext.closePath() + + browserCanvasContext.fill() + } + + function drawLabel () { + let label = '6000' + let fontSize = 10 + + let ratePoint = { + x: 0, + y: mouse.position.y + } + + // getRateFromPoint(ratePoint) + + let labelPoint = { + x: viewPort.visibleArea.topRight.x + 5, + y: mouse.position.y - fontSize / 2 + 1 + } + + let xOffset = 0// label.length / 2 * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(labelPoint.x, labelPoint.y, xOffset * 2, fontSize) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + browserCanvasContext.fill() + + browserCanvasContext.closePath() + + 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/TimeScale.js b/Scales/TimeScale.js index cbe523a25..be3cc9232 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -11,42 +11,56 @@ function newTimeScale () { draw: draw, getContainer: getContainer, initialize: initialize, - lenghtPercentage: 100 + lenghtPercentage: undefined } + const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50 const RIGHT_MARGIN = 50 + const STEP_SIZE = 5 - let container = newContainer() - container.initialize(MODULE_NAME) - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x thisObject.container.frame.height = 100 - container.frame.position.x = viewPort.visibleArea.bottomRight.x - container.frame.position.y = TOP_SPACE_HEIGHT + thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x + thisObject.container.frame.position.y = TOP_SPACE_HEIGHT - container.isDraggeable = false - container.isClickeable = false - container.isWheelable = true + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true return thisObject function initialize () { thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.lenghtPercentage) { + thisObject.lenghtPercentage = LENGHT_PERCENTAGE_DEFAULT_VALUE + } else { + thisObject.lenghtPercentage = JSON.parse(thisObject.lenghtPercentage) + } + + event.lenghtPercentage = thisObject.lenghtPercentage + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) } function onMouseWheel (event) { delta = event.wheelDelta if (delta < 0) { - thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10 - if (thisObject.lenghtPercentage < 10) { thisObject.lenghtPercentage = 10 } + thisObject.lenghtPercentage = thisObject.lenghtPercentage - STEP_SIZE + if (thisObject.lenghtPercentage < STEP_SIZE) { thisObject.lenghtPercentage = STEP_SIZE } } else { - thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10 + thisObject.lenghtPercentage = thisObject.lenghtPercentage + STEP_SIZE if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 } } + event.lenghtPercentage = thisObject.lenghtPercentage thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage) } function getContainer (point) { @@ -55,7 +69,7 @@ function newTimeScale () { /* First we check if this point is inside this object UI. */ if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { - return this.container + return thisObject.container } else { /* This point does not belong to this space. */ diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 6a206873c..9121a5356 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -2,7 +2,6 @@ function newBottomSpace () { var thisObject = { deleteTradingHistory: undefined, - chartAspectRatio: undefined, container: undefined, draw: draw, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -23,9 +22,6 @@ function newBottomSpace () { thisObject.deleteTradingHistory = newDeleteTradingHistory() thisObject.deleteTradingHistory.initialize() - thisObject.chartAspectRatio = newChartAspectRatio() - thisObject.chartAspectRatio.initialize() - window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) } @@ -43,11 +39,6 @@ function newBottomSpace () { container = thisObject.deleteTradingHistory.getContainer(point) if (container !== undefined) { return container } - container = thisObject.chartAspectRatio.getContainer(point) - if (container !== undefined) { return container } - - /* The point does not belong to any inner container, so we return the current container. */ - return thisObject.container } @@ -56,7 +47,6 @@ function newBottomSpace () { drawBackground() thisObject.deleteTradingHistory.draw() - thisObject.chartAspectRatio.draw() } function drawBackground () { diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 2486cb0a7..80b0c838e 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -25,13 +25,7 @@ function newChartSpace () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) -/* - thisObject.container.frame.width = TIME_MACHINE_WIDTH - thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y - thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 - thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 -*/ thisObject.container.isDraggeable = false return thisObject diff --git a/TimeMachine.js b/TimeMachine.js index bfd9c20eb..75e11f84a 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -31,7 +31,7 @@ function newTimeMachine () { thisObject.container.detectMouseOver = true thisObject.container.frame.width = TIME_MACHINE_WIDTH - thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y + thisObject.container.frame.height = TIME_MACHINE_HEIGHT thisObject.container.frame.position.x = browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2 thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2 @@ -41,6 +41,7 @@ function newTimeMachine () { const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 let timeScale + let rigthScale return thisObject @@ -66,16 +67,6 @@ function newTimeMachine () { controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) - /* Each Time Machine has a Time Scale. */ - - timeScale = newTimeScale() - timeScale.initialize() - - timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { - thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 - thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) - }) - /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ let position = 0 // This defines the position of each chart respect to each other. @@ -94,11 +85,7 @@ function newTimeMachine () { timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized) function onDefaultInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Entering function.') } - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Initialization of the only market failed.') } - callBackFunction(err) return } @@ -108,6 +95,26 @@ function newTimeMachine () { controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) + /* Each Time Machine has a Time Scale and a Right Scale. */ + + timeScale = newTimeScale() + + timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { + thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + }) + + timeScale.initialize() + + rigthScale = newRigthScale() + + rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + }) + + rigthScale.initialize() + initializeTheRest() } @@ -186,16 +193,28 @@ function newTimeMachine () { chart.draw() } - timeScale.draw() + if (timeScale !== undefined) { timeScale.draw() } + if (rigthScale !== undefined) { rigthScale.draw() } } function getContainer (point, purpose) { let container - container = timeScale.getContainer(point) - if (container !== undefined) { - if (container.isForThisPurpose(purpose)) { - return container + if (timeScale !== undefined) { + container = timeScale.getContainer(point) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + } + + if (rigthScale !== undefined) { + container = rigthScale.getContainer(point) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } } } diff --git a/TimelineChart.js b/TimelineChart.js index 7d75c178b..da21b21be 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -25,7 +25,7 @@ thisObject.container.initialize(MODULE_NAME) thisObject.container.detectMouseOver = true - let chartGrid + // let chartGrid let breakpointsBar let initializationReady = false @@ -66,7 +66,7 @@ thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) }) thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { @@ -116,8 +116,8 @@ logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - chartGrid = newChartGrid() - chartGrid.initialize() + // chartGrid = newChartGrid() + // chartGrid.initialize() breakpointsBar = newBreakpointsBar() breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) @@ -159,13 +159,6 @@ callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) return } - - canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged) - - function onAspectRatioChanged (pAspectRatio) { - thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y - recalculateScale() - } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) @@ -251,7 +244,7 @@ let container - container = chartGrid.getContainer(point) + // container = chartGrid.getContainer(point) if (container !== undefined) { return container } @@ -321,7 +314,7 @@ if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() - chartGrid.draw(thisObject.container, timeLineCoordinateSystem) + // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) plotterManager.draw()