From cfd4045009b2dd50eb927229c67a2e4ec8352b22 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 9 Apr 2019 21:42:23 +0200 Subject: [PATCH 01/26] Improvements on Product Card --- Globals.js | 3 +- ProductCard.js | 1414 ++++++++++++++++++++++++------------------------ 2 files changed, 717 insertions(+), 700 deletions(-) diff --git a/Globals.js b/Globals.js index 08ed4c5b7..167583e09 100644 --- a/Globals.js +++ b/Globals.js @@ -43,7 +43,8 @@ UI_PANEL = { WIDTH: { SMALL: 100, NORMAL: 150, - LARGE: 350 + LARGE: 250, + X_LARGE: 350 }, HEIGHT: { SMALL: 65, diff --git a/ProductCard.js b/ProductCard.js index 83e38a692..b90a0bbb0 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -1,917 +1,933 @@ - function newProductCard () { - const CONSOLE_LOG = false +function newProductCard () { + const CONSOLE_LOG = false - const MODULE_NAME = 'Product Card' - const INFO_LOG = false - const ERROR_LOG = true - const INTENSIVE_LOG = false - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME + const MODULE_NAME = 'Product Card' + const INFO_LOG = false + const ERROR_LOG = true + const INTENSIVE_LOG = false + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME - var thisObject = { - container: undefined, - draw: draw, - status: 'off', - devTeam: undefined, - bot: undefined, - product: undefined, - code: undefined, + var thisObject = { + container: undefined, + draw: draw, + status: 'off', + devTeam: undefined, + bot: undefined, + product: undefined, + code: undefined, - setDatetime: setDatetime, - setTimePeriod: setTimePeriod, + setDatetime: setDatetime, + setTimePeriod: setTimePeriod, - onMarketFileLoaded: onMarketFileLoaded, - onDailyFileLoaded: onDailyFileLoaded, - onSingleFileLoaded: onSingleFileLoaded, - onFileSequenceLoaded: onFileSequenceLoaded, + onMarketFileLoaded: onMarketFileLoaded, + onDailyFileLoaded: onDailyFileLoaded, + onSingleFileLoaded: onSingleFileLoaded, + onFileSequenceLoaded: onFileSequenceLoaded, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - } + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + } - let LOADING_FILL_STYLE = 'rgba(234, 143, 23, @Opacity)' - let LOADED_FILL_STYLE = 'rgba(45, 232, 28, @Opacity)' - let UNLOADED_FILL_STYLE = 'rgba(226, 226, 226, @Opacity)' + let LOADING_FILL_STYLE = 'rgba(234, 143, 23, @Opacity)' + let LOADED_FILL_STYLE = 'rgba(45, 232, 28, @Opacity)' + let UNLOADED_FILL_STYLE = 'rgba(226, 226, 226, @Opacity)' - let LOADING_STROKE_STYLE = 'rgba(234, 143, 23, @Opacity)' - let LOADED_STROKE_STYLE = 'rgba(150, 150, 150, @Opacity)' - let UNLOADED_STROKE_STYLE = 'rgba(226, 226, 226, @Opacity)' + let LOADING_STROKE_STYLE = 'rgba(234, 143, 23, @Opacity)' + let LOADED_STROKE_STYLE = 'rgba(150, 150, 150, @Opacity)' + let UNLOADED_STROKE_STYLE = 'rgba(226, 226, 226, @Opacity)' - let marketFileProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let marketFileProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let dailyFileProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let dailyFileProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let singleFileProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let singleFileProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let fileSequenceProgressBar = { - value: 0, - animatedValue: 0, - fillStyle: UNLOADED_FILL_STYLE, - strokeStyle: UNLOADED_STROKE_STYLE, - opacity: 0.00 - } + let fileSequenceProgressBar = { + value: 0, + animatedValue: 0, + fillStyle: UNLOADED_FILL_STYLE, + strokeStyle: UNLOADED_STROKE_STYLE, + opacity: 0.00 + } - let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let timePeriod = INITIAL_TIME_PERIOD + let datetime = INITIAL_DATE - /* TODO We are in a transition period in which bots and teams images might be located at different places. - What we are going to do then is to try to load them from both places and use the variable that finally gets an - image. */ + /* TODO We are in a transition period in which bots and teams images might be located at different places. + What we are going to do then is to try to load them from both places and use the variable that finally gets an + image. */ - /* This is the legacy image storage. */ + /* This is the legacy image storage. */ - let legacyTeamAvatar - let legacyTeamAvatarLoaded = false + let legacyTeamAvatar + let legacyTeamAvatarLoaded = false - /* TODO Temporary code */ - let legacyBotAvatar - let legacyBotAvatarLoaded = false + /* TODO Temporary code */ + let legacyBotAvatar + let legacyBotAvatarLoaded = false - /* Now the plotters images */ + /* Now the plotters images */ - let legacyPlotterBanner - let legacyPlotterBannerLoaded = false + let legacyPlotterBanner + let legacyPlotterBannerLoaded = false - /* We are transitioning towards this */ + /* We are transitioning towards this */ - let teamAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. - let teamAvatarLoaded = false + let teamAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. + let teamAvatarLoaded = false - /* TODO Temporary code */ - let botAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. - let botAvatarLoaded = false + /* TODO Temporary code */ + let botAvatar // stores the avatar image of the team the bot portrayed at this card belongs to. + let botAvatarLoaded = false - /* Add an Event Handler */ + /* Add an Event Handler */ - thisObject.eventHandler = newEventHandler() - let imagesLoaded = 0 + thisObject.eventHandler = newEventHandler() + let imagesLoaded = 0 - return thisObject + let lastMouseOver = 0 // This variable is used to animate what happens while we are having a mounse over. - function initialize () { - /* Create this objects continer */ - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + return thisObject - var container = newContainer() - container.name = 'Product Card ' + thisObject.code - container.initialize() - container.isDraggeable = false - container.isClickeable = true - thisObject.container = container + function initialize () { + /* Create this objects continer */ + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - /* Add information that will later be needed. */ + var container = newContainer() + container.name = 'Product Card ' + thisObject.code + container.initialize() + container.isDraggeable = false + container.isClickeable = true + thisObject.container = container - let team = ecosystem.getTeam(thisObject.product.plotter.devTeam) - let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName) - let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName) + /* Add information that will later be needed. */ - thisObject.product.plotter.profilePicture = plotterModule.profilePicture - thisObject.product.plotter.module = plotterModule + let team = ecosystem.getTeam(thisObject.product.plotter.devTeam) + let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName) + let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName) - /* Lets set the basic dimensions of this thisObject. */ + thisObject.product.plotter.profilePicture = plotterModule.profilePicture + thisObject.product.plotter.module = plotterModule - var position = { - x: 0, - y: 0 - } + /* Lets set the basic dimensions of this thisObject. */ - this.container.frame.position = position - this.container.frame.width = 330 - this.container.frame.height = 100 + var position = { + x: 0, + y: 0 + } - /* We retrieve the locally stored status of the Product */ + this.container.frame.position = position + this.container.frame.width = UI_PANEL.WIDTH.LARGE - 20 + this.container.frame.height = 100 - let storedValue = window.localStorage.getItem(thisObject.code) + /* We retrieve the locally stored status of the Product */ - if (storedValue !== null) { - thisObject.status = storedValue + let storedValue = window.localStorage.getItem(thisObject.code) - if (thisObject.status === PRODUCT_CARD_STATUS.ON) { - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - } - } else { - /* + if (storedValue !== null) { + thisObject.status = storedValue - This happens the first time the app is run on a new browser. + if (thisObject.status === PRODUCT_CARD_STATUS.ON) { + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + } + } else { + /* - We will start with all product off, except for the candles chart, since something needs to be shown and allow the user to position themselves - on the timeline. + This happens the first time the app is run on a new browser. - For the time being, we will hard-code the name of the bot we will turn on by default, since we dont see that change in the near future. + We will start with all product off, except for the candles chart, since something needs to be shown and allow the user to position themselves + on the timeline. - */ + For the time being, we will hard-code the name of the bot we will turn on by default, since we dont see that change in the near future. - const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles' - - if (thisObject.code === DEFAULT_ON_PRODUCT) { - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - } else { - changeStatusTo(PRODUCT_CARD_STATUS.OFF) - } - } - - /* Lets listen to our own events to react when we have a Mouse Click */ - - thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed) - - /* WARNING THIS IS TEMPORARY CODE */ - - const LEGACY_TEAM = thisObject.devTeam.codeName - const REPO = thisObject.bot.repo - const PROFILE_PIC = thisObject.bot.profilePicture - - /* The plotter banner, comes from the Legacy Location so far, no matter if the Team is at the Teams Modules or not. */ - - const PLOTTER_TEAM = thisObject.product.plotter.devTeam - const PLOTTER_REPO = thisObject.product.plotter.codeName - const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture - - legacyPlotterBanner = new Image() - legacyPlotterBanner.onload = onLegacyPlotterBanner - - function onLegacyPlotterBanner () { - legacyPlotterBannerLoaded = true - } - - legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC - - const TEAM = thisObject.devTeam.codeName.toLowerCase() - const BOT = thisObject.bot.codeName.toLowerCase() - - if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) { - // This means this Team is a Lecay Team, still not at any Module. - - /* - Here we will download the images still at the legacy storage. - */ - - legacyTeamAvatar = new Image() - - legacyTeamAvatar.onload = onLegacyImageLoad - - function onLegacyImageLoad () { - legacyTeamAvatarLoaded = true - } - - legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png' - - legacyBotAvatar = new Image() - legacyBotAvatar.onload = onLegacyImageLoadBot - - function onLegacyImageLoadBot () { - legacyBotAvatarLoaded = true - thisObject.bot.avatar = legacyBotAvatar - } - - legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC - } else { - /* - Here we will download the images of teams uploaded at the Teams Module. - There might be Product Cards of bots beloging to teams not present currently at the Teams Module, in those cases - nothing should happen. */ - teamAvatar = new Image() + const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles' - teamAvatar.onload = onImageLoad + if (thisObject.code === DEFAULT_ON_PRODUCT) { + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + } else { + changeStatusTo(PRODUCT_CARD_STATUS.OFF) + } + } - function onImageLoad () { - teamAvatarLoaded = true - } + /* Lets listen to our own events to react when we have a Mouse Click */ - teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM) + thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - botAvatar = new Image() - botAvatar.onload = onImageLoadBot + /* WARNING THIS IS TEMPORARY CODE */ - function onImageLoadBot () { - botAvatarLoaded = true - thisObject.bot.avatar = botAvatar - } + const LEGACY_TEAM = thisObject.devTeam.codeName + const REPO = thisObject.bot.repo + const PROFILE_PIC = thisObject.bot.profilePicture - botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } - } - } + /* The plotter banner, comes from the Legacy Location so far, no matter if the Team is at the Teams Modules or not. */ - function getContainer (point) { - var container + const PLOTTER_TEAM = thisObject.product.plotter.devTeam + const PLOTTER_REPO = thisObject.product.plotter.codeName + const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture - /* First we check if this point is inside this space. */ + legacyPlotterBanner = new Image() + legacyPlotterBanner.onload = onLegacyPlotterBanner - if (this.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ + function onLegacyPlotterBanner () { + legacyPlotterBannerLoaded = true + } - return undefined - } - } + legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC - function setDatetime (pDatetime) { - /* + const TEAM = thisObject.devTeam.codeName.toLowerCase() + const BOT = thisObject.bot.codeName.toLowerCase() - When the datetime changes from one day to another, this forces cursors to potentially load more files, thus we reset this counter and - get ready to receive events on files loaded. + if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) { + // This means this Team is a Lecay Team, still not at any Module. - */ + /* + Here we will download the images still at the legacy storage. + */ - let currentDate = Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS) - let newDate = Math.trunc(pDatetime.valueOf() / ONE_DAY_IN_MILISECONDS) + legacyTeamAvatar = new Image() - datetime = pDatetime + legacyTeamAvatar.onload = onLegacyImageLoad - if (currentDate !== newDate) { - if (timePeriod <= _1_HOUR_IN_MILISECONDS) { - dailyFileProgressBar.animatedValue = 0 + function onLegacyImageLoad () { + legacyTeamAvatarLoaded = true + } - if (CONSOLE_LOG === true) { - console.log('ProductCard -> onDayChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) - } - } - } - } + legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png' - function setTimePeriod (pTimePeriod) { - /* + legacyBotAvatar = new Image() + legacyBotAvatar.onload = onLegacyImageLoadBot - When the time period below or equal to 1 hour changes, this forces cursors to potentially load more files, thus we reset this counter and - get ready to receive events on files loaded. + function onLegacyImageLoadBot () { + legacyBotAvatarLoaded = true + thisObject.bot.avatar = legacyBotAvatar + } - */ + legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC + } else { + /* + Here we will download the images of teams uploaded at the Teams Module. + There might be Product Cards of bots beloging to teams not present currently at the Teams Module, in those cases + nothing should happen. + */ - if (timePeriod !== pTimePeriod) { - timePeriod = pTimePeriod + teamAvatar = new Image() - if (timePeriod <= _1_HOUR_IN_MILISECONDS) { - dailyFileProgressBar.animatedValue = 0 + teamAvatar.onload = onImageLoad - if (CONSOLE_LOG === true) { - console.log('ProductCard -> onTimePeriodChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) - } - } - } - } + function onImageLoad () { + teamAvatarLoaded = true + } - function onMarketFileLoaded (event) { - marketFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - marketFileProgressBar.fillStyle = LOADING_FILL_STYLE - marketFileProgressBar.strokeStyle = LOADING_STROKE_STYLE + teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM) - if (marketFileProgressBar.value > 100) { marketFileProgressBar.value = 100 } + botAvatar = new Image() + botAvatar.onload = onImageLoadBot - if (CONSOLE_LOG === true) { - console.log('ProductCard onMarketFileLoaded Value = ' + marketFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + function onImageLoadBot () { + botAvatarLoaded = true + thisObject.bot.avatar = botAvatar + } - function onDailyFileLoaded (event) { - dailyFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - dailyFileProgressBar.fillStyle = LOADING_FILL_STYLE - dailyFileProgressBar.strokeStyle = LOADING_STROKE_STYLE + botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + } + } - if (dailyFileProgressBar.value > 100) { dailyFileProgressBar.value = 100 } + function getContainer (point) { + var container - if (CONSOLE_LOG === true) { - console.log('ProductCard onDailyFileLoaded Value = ' + dailyFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + /* First we check if this point is inside this space. */ - function onSingleFileLoaded (event) { - singleFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - singleFileProgressBar.fillStyle = LOADING_FILL_STYLE - singleFileProgressBar.strokeStyle = LOADING_STROKE_STYLE + if (this.container.frame.isThisPointHere(point, true) === true) { + return this.container + } else { + /* This point does not belong to this space. */ - if (singleFileProgressBar.value > 100) { singleFileProgressBar.value = 100 } + return undefined + } + } - if (CONSOLE_LOG === true) { - console.log('ProductCard onSingleFileLoaded Value = ' + singleFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + function setDatetime (pDatetime) { + /* - function onFileSequenceLoaded (event) { - fileSequenceProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) - fileSequenceProgressBar.fillStyle = LOADING_FILL_STYLE - fileSequenceProgressBar.strokeStyle = LOADING_STROKE_STYLE + When the datetime changes from one day to another, this forces cursors to potentially load more files, thus we reset this counter and + get ready to receive events on files loaded. - if (fileSequenceProgressBar.value > 100) { fileSequenceProgressBar.value = 100 } + */ - if (CONSOLE_LOG === true) { - console.log('ProductCard onFileSequenceLoaded Value = ' + fileSequenceProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) - } - } + let currentDate = Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS) + let newDate = Math.trunc(pDatetime.valueOf() / ONE_DAY_IN_MILISECONDS) - function buttonPressed (event) { - switch (thisObject.status) { + datetime = pDatetime - case PRODUCT_CARD_STATUS.ON: + if (currentDate !== newDate) { + if (timePeriod <= _1_HOUR_IN_MILISECONDS) { + dailyFileProgressBar.animatedValue = 0 - changeStatusTo(PRODUCT_CARD_STATUS.OFF) + if (CONSOLE_LOG === true) { + console.log('ProductCard -> onDayChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) + } + } + } + } - marketFileProgressBar.animatedValue = 0 - marketFileProgressBar.value = 0 - marketFileProgressBar.fillStyle = UNLOADED_FILL_STYLE - marketFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + function setTimePeriod (pTimePeriod) { + /* - dailyFileProgressBar.animatedValue = 0 - dailyFileProgressBar.value = 0 - dailyFileProgressBar.fillStyle = UNLOADED_FILL_STYLE - dailyFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + When the time period below or equal to 1 hour changes, this forces cursors to potentially load more files, thus we reset this counter and + get ready to receive events on files loaded. - singleFileProgressBar.animatedValue = 0 - singleFileProgressBar.value = 0 - singleFileProgressBar.fillStyle = UNLOADED_FILL_STYLE - singleFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + */ - fileSequenceProgressBar.animatedValue = 0 - fileSequenceProgressBar.value = 0 - fileSequenceProgressBar.fillStyle = UNLOADED_FILL_STYLE - fileSequenceProgressBar.strokeStyle = UNLOADED_STROKE_STYLE + if (timePeriod !== pTimePeriod) { + timePeriod = pTimePeriod - break + if (timePeriod <= _1_HOUR_IN_MILISECONDS) { + dailyFileProgressBar.animatedValue = 0 - case PRODUCT_CARD_STATUS.OFF: + if (CONSOLE_LOG === true) { + console.log('ProductCard -> onTimePeriodChanged -> dailyFileProgressBar.animatedValue = ' + dailyFileProgressBar.animatedValue) + } + } + } + } - changeStatusTo(PRODUCT_CARD_STATUS.LOADING) + function onMarketFileLoaded (event) { + marketFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + marketFileProgressBar.fillStyle = LOADING_FILL_STYLE + marketFileProgressBar.strokeStyle = LOADING_STROKE_STYLE - break + if (marketFileProgressBar.value > 100) { marketFileProgressBar.value = 100 } - } - } + if (CONSOLE_LOG === true) { + console.log('ProductCard onMarketFileLoaded Value = ' + marketFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - function changeStatusTo (pNewStatus) { - if (thisObject.status !== pNewStatus) { - thisObject.status = pNewStatus + function onDailyFileLoaded (event) { + dailyFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + dailyFileProgressBar.fillStyle = LOADING_FILL_STYLE + dailyFileProgressBar.strokeStyle = LOADING_STROKE_STYLE - let eventData = thisObject + if (dailyFileProgressBar.value > 100) { dailyFileProgressBar.value = 100 } - thisObject.container.eventHandler.raiseEvent('Status Changed', eventData) + if (CONSOLE_LOG === true) { + console.log('ProductCard onDailyFileLoaded Value = ' + dailyFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - window.localStorage.setItem(thisObject.code, thisObject.status) - } - } + function onSingleFileLoaded (event) { + singleFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + singleFileProgressBar.fillStyle = LOADING_FILL_STYLE + singleFileProgressBar.strokeStyle = LOADING_STROKE_STYLE - function draw () { - drawProductCard() - } + if (singleFileProgressBar.value > 100) { singleFileProgressBar.value = 100 } - function drawProductCard () { - /* + if (CONSOLE_LOG === true) { + console.log('ProductCard onSingleFileLoaded Value = ' + singleFileProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - Put images on the card. + function onFileSequenceLoaded (event) { + fileSequenceProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue) + fileSequenceProgressBar.fillStyle = LOADING_FILL_STYLE + fileSequenceProgressBar.strokeStyle = LOADING_STROKE_STYLE - */ + if (fileSequenceProgressBar.value > 100) { fileSequenceProgressBar.value = 100 } - const devTeamImageSize = 50 - const botImageSize = 50 - const plotterImageSize = { - width: 180, - height: 50 - } + if (CONSOLE_LOG === true) { + console.log('ProductCard onFileSequenceLoaded Value = ' + fileSequenceProgressBar.value + '% for ' + thisObject.code + '. Event = ' + JSON.stringify(event)) + } + } - /* First the Dev Team Profile Picture. */ + function buttonPressed (event) { + switch (thisObject.status) { - let teamImagePoint = { - x: 10, - y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 - } + case PRODUCT_CARD_STATUS.ON: - teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint) + changeStatusTo(PRODUCT_CARD_STATUS.OFF) - let teamImage + marketFileProgressBar.animatedValue = 0 + marketFileProgressBar.value = 0 + marketFileProgressBar.fillStyle = UNLOADED_FILL_STYLE + marketFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - if (legacyTeamAvatarLoaded === true) { - teamImage = legacyTeamAvatar - } + dailyFileProgressBar.animatedValue = 0 + dailyFileProgressBar.value = 0 + dailyFileProgressBar.fillStyle = UNLOADED_FILL_STYLE + dailyFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - if (teamAvatarLoaded === true) { - teamImage = teamAvatar - } + singleFileProgressBar.animatedValue = 0 + singleFileProgressBar.value = 0 + singleFileProgressBar.fillStyle = UNLOADED_FILL_STYLE + singleFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - if (teamImage !== undefined) { - if (teamImage.naturalHeight !== 0) { - /* The image is rounded before being displayed. */ + fileSequenceProgressBar.animatedValue = 0 + fileSequenceProgressBar.value = 0 + fileSequenceProgressBar.fillStyle = UNLOADED_FILL_STYLE + fileSequenceProgressBar.strokeStyle = UNLOADED_STROKE_STYLE - browserCanvasContext.save() - browserCanvasContext.beginPath() - browserCanvasContext.arc(teamImagePoint.x + devTeamImageSize / 2, teamImagePoint.y + devTeamImageSize / 2, devTeamImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.clip() - browserCanvasContext.drawImage(teamImage, teamImagePoint.x, teamImagePoint.y, devTeamImageSize, devTeamImageSize) - browserCanvasContext.beginPath() - browserCanvasContext.arc(teamImagePoint.x, teamImagePoint.y, devTeamImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.clip() - browserCanvasContext.closePath() - browserCanvasContext.restore() - } - } + break - /* Second the Bot's Profile Picture. */ + case PRODUCT_CARD_STATUS.OFF: - if (thisObject.bot.profilePicture !== undefined) { - let botImagePoint = { - x: thisObject.container.frame.width - botImageSize / 2 - 40, - y: thisObject.container.frame.height / 2 - botImageSize / 2 - } + changeStatusTo(PRODUCT_CARD_STATUS.LOADING) - botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint) + break - let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture + } + } - /* TODO Temporary code */ - let botImage + function onMouseOver (event) { + lastMouseOver = 25 + } - botImage = thisObject.bot.avatar + function changeStatusTo (pNewStatus) { + if (thisObject.status !== pNewStatus) { + thisObject.status = pNewStatus - if (botImage !== undefined) { - if (botImage.naturalHeight !== 0) { - /* The image is rounded before being displayed. */ + let eventData = thisObject - browserCanvasContext.save() - browserCanvasContext.beginPath() - browserCanvasContext.arc(botImagePoint.x + botImageSize / 2, botImagePoint.y + botImageSize / 2, botImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.clip() - browserCanvasContext.drawImage(botImage, botImagePoint.x, botImagePoint.y, botImageSize, botImageSize) - browserCanvasContext.beginPath() - browserCanvasContext.arc(botImagePoint.x, botImagePoint.y, botImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.clip() - browserCanvasContext.closePath() - browserCanvasContext.restore() - } - } - } + thisObject.container.eventHandler.raiseEvent('Status Changed', eventData) - /* Third the Plotter's Profile Picture. */ + window.localStorage.setItem(thisObject.code, thisObject.status) + } + } - if (thisObject.product.plotter.profilePicture !== undefined) { - let plotterImagePoint = { - x: thisObject.container.frame.width / 2 - plotterImageSize.width / 2, - y: thisObject.container.frame.height / 2 - plotterImageSize.height / 2 - } + function draw () { + drawProductCard() + } - plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint) + function drawProductCard () { + /* - let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture - let plotterImage = legacyPlotterBanner + Put images on the card. - if (plotterImage !== undefined) { - if (plotterImage.naturalHeight !== 0) { - browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height) - } - } - } + */ - drawProductLoadStatus() + const devTeamImageSize = 20 + const botImageSize = 20 + const plotterImageSize = { + width: 180, + height: 50 + } - function drawProductLoadStatus () { - let offFillStyle = 'rgba(' + UI_COLOR.RED + ', 0.20)' - let onFillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.20)' - let loadingFillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)' + lastMouseOver-- // Animating the mouse onMouseOver - switch (thisObject.status) { + if (lastMouseOver > 0) { + /* First the Dev Team Profile Picture. */ - case PRODUCT_CARD_STATUS.ON: - browserCanvasContext.fillStyle = onFillStyle - break + let teamImagePoint = { + x: 2, + y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 + } - case PRODUCT_CARD_STATUS.OFF: - browserCanvasContext.fillStyle = offFillStyle - break + teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint) - case PRODUCT_CARD_STATUS.LOADING: - browserCanvasContext.fillStyle = loadingFillStyle - break + let teamImage - } + if (legacyTeamAvatarLoaded === true) { + teamImage = legacyTeamAvatar + } - let centerPoint = { - x: thisObject.container.frame.width / 2, - y: thisObject.container.frame.height / 2 - 13 - } + if (teamAvatarLoaded === true) { + teamImage = teamAvatar + } - let point1 = { - x: centerPoint.x - plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 - 7 - } + if (teamImage !== undefined) { + if (teamImage.naturalHeight !== 0) { + /* The image is rounded before being displayed. */ - let point2 = { - x: centerPoint.x + plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 - 7 - } + browserCanvasContext.save() + browserCanvasContext.beginPath() + browserCanvasContext.arc(teamImagePoint.x + devTeamImageSize / 2, teamImagePoint.y + devTeamImageSize / 2, devTeamImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.clip() + browserCanvasContext.drawImage(teamImage, teamImagePoint.x, teamImagePoint.y, devTeamImageSize, devTeamImageSize) + browserCanvasContext.beginPath() + browserCanvasContext.arc(teamImagePoint.x, teamImagePoint.y, devTeamImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.clip() + browserCanvasContext.closePath() + browserCanvasContext.restore() + } + } - let point3 = { - x: centerPoint.x + plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 + 7 - } + /* Second the Bot's Profile Picture. */ - let point4 = { - x: centerPoint.x - plotterImageSize.width / 2, - y: centerPoint.y - plotterImageSize.height / 2 + 7 - } + if (thisObject.bot.profilePicture !== undefined) { + let botImagePoint = { + x: thisObject.container.frame.width - botImageSize / 2 - 8, + y: thisObject.container.frame.height / 2 - botImageSize / 2 + } - /* Now the transformations. */ + botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint) - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + /* TODO Temporary code */ + let botImage - browserCanvasContext.fill() + botImage = thisObject.bot.avatar - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() - } + if (botImage !== undefined) { + if (botImage.naturalHeight !== 0) { + /* The image is rounded before being displayed. */ - /* - print the text - */ + browserCanvasContext.save() + browserCanvasContext.beginPath() + browserCanvasContext.arc(botImagePoint.x + botImageSize / 2, botImagePoint.y + botImageSize / 2, botImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.clip() + browserCanvasContext.drawImage(botImage, botImagePoint.x, botImagePoint.y, botImageSize, botImageSize) + browserCanvasContext.beginPath() + browserCanvasContext.arc(botImagePoint.x, botImagePoint.y, botImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.clip() + browserCanvasContext.closePath() + browserCanvasContext.restore() + } + } + } + } - let labelPoint - let fontSize = 10 + /* Third the Plotter's Profile Picture. */ + + if (thisObject.product.plotter.profilePicture !== undefined) { + let plotterImagePoint = { + x: thisObject.container.frame.width / 2 - plotterImageSize.width / 2, + y: thisObject.container.frame.height / 2 - plotterImageSize.height / 2 + } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint) + + let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture + let plotterImage = legacyPlotterBanner - let label + if (plotterImage !== undefined) { + if (plotterImage.naturalHeight !== 0) { + browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height) + } + } + } - /* devTeam */ + drawProductLoadStatus() - label = thisObject.devTeam.displayName + function drawProductLoadStatus () { + let offFillStyle = 'rgba(' + UI_COLOR.RED + ', 0.20)' + let onFillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.20)' + let loadingFillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)' - labelPoint = { - x: 10 + devTeamImageSize / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 - } + switch (thisObject.status) { - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + case PRODUCT_CARD_STATUS.ON: + browserCanvasContext.fillStyle = onFillStyle + break - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + case PRODUCT_CARD_STATUS.OFF: + browserCanvasContext.fillStyle = offFillStyle + break - /* bot */ + case PRODUCT_CARD_STATUS.LOADING: + browserCanvasContext.fillStyle = loadingFillStyle + break - label = thisObject.bot.displayName + } - labelPoint = { - x: thisObject.container.frame.width - 40 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 - } + let centerPoint = { + x: thisObject.container.frame.width / 2, + y: thisObject.container.frame.height / 2 - 13 + } - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + let point1 = { + x: centerPoint.x - plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 - 7 + } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + let point2 = { + x: centerPoint.x + plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 - 7 + } - /* product */ + let point3 = { + x: centerPoint.x + plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 + 7 + } - fontSize = 10 + let point4 = { + x: centerPoint.x - plotterImageSize.width / 2, + y: centerPoint.y - plotterImageSize.height / 2 + 7 + } - label = thisObject.product.displayName + /* Now the transformations. */ - labelPoint = { - x: 65, - y: thisObject.container.frame.height / 2 + 15 - } + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) - labelPoint = { - x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 5 - } + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + browserCanvasContext.fill() - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() + } - /* ------------------- Progress Bars -------------------------- */ + /* + print the text + */ - const ANIMATED_INCREMENT = 5 - const OPACITY_INCREMENT = 0.05 - const OPACITY_MIN = 0.1 + let labelPoint + let fontSize = 10 - let point1 - let point2 - let point3 - let point4 + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' - /* We draw here the Market Progress Bar. */ + let label - /* Animate */ + if (lastMouseOver > 0) { + /* devTeam */ - if (marketFileProgressBar.animatedValue < marketFileProgressBar.value) { - marketFileProgressBar.animatedValue = marketFileProgressBar.animatedValue + ANIMATED_INCREMENT - marketFileProgressBar.opacity = marketFileProgressBar.opacity + OPACITY_INCREMENT - } + label = thisObject.devTeam.displayName + if (label.length > 10) { label = label.substring(1, 8) + '...' } - if (marketFileProgressBar.animatedValue >= 100) { - marketFileProgressBar.animatedValue = 100 + labelPoint = { + x: 2 + devTeamImageSize / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 + } - marketFileProgressBar.opacity = marketFileProgressBar.opacity - OPACITY_INCREMENT - if (marketFileProgressBar.opacity < OPACITY_MIN) { marketFileProgressBar.opacity = OPACITY_MIN } + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - marketFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) - marketFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + /* bot */ - point1 = { - x: 0, - y: thisObject.container.frame.height - 1 - } + label = thisObject.bot.displayName + if (label.length > 10) { label = label.substring(1, 8) + '...' } - point2 = { - x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 1 - } + labelPoint = { + x: thisObject.container.frame.width - 8 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height / 2 + devTeamImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 5 + } - point3 = { - x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 3 - } + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - point4 = { - x: 0, - y: thisObject.container.frame.height - 3 - } + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } - /* Now the transformations. */ + /* product */ - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + fontSize = 10 - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + label = thisObject.product.displayName - browserCanvasContext.fillStyle = marketFileProgressBar.fillStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = marketFileProgressBar.strokeStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) + labelPoint = { + x: 65, + y: thisObject.container.frame.height / 2 + 15 + } - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() + labelPoint = { + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height / 2 - devTeamImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 20 + } - /* We draw here the Daily Progress Bar. */ + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - /* Animate */ + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - if (dailyFileProgressBar.animatedValue < dailyFileProgressBar.value) { - dailyFileProgressBar.animatedValue = dailyFileProgressBar.animatedValue + ANIMATED_INCREMENT - dailyFileProgressBar.opacity = dailyFileProgressBar.opacity + OPACITY_INCREMENT - } + /* ------------------- Progress Bars -------------------------- */ - if (dailyFileProgressBar.animatedValue >= 100) { - dailyFileProgressBar.animatedValue = 100 + const ANIMATED_INCREMENT = 5 + const OPACITY_INCREMENT = 0.05 + const OPACITY_MIN = 0.1 - dailyFileProgressBar.opacity = dailyFileProgressBar.opacity - OPACITY_INCREMENT - if (dailyFileProgressBar.opacity < OPACITY_MIN) { dailyFileProgressBar.opacity = OPACITY_MIN } + let point1 + let point2 + let point3 + let point4 - dailyFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - dailyFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + /* We draw here the Market Progress Bar. */ - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + /* Animate */ - point1 = { - x: 0, - y: thisObject.container.frame.height - 4 - } + if (marketFileProgressBar.animatedValue < marketFileProgressBar.value) { + marketFileProgressBar.animatedValue = marketFileProgressBar.animatedValue + ANIMATED_INCREMENT + marketFileProgressBar.opacity = marketFileProgressBar.opacity + OPACITY_INCREMENT + } - point2 = { - x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 4 - } + if (marketFileProgressBar.animatedValue >= 100) { + marketFileProgressBar.animatedValue = 100 - point3 = { - x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 6 - } + marketFileProgressBar.opacity = marketFileProgressBar.opacity - OPACITY_INCREMENT + if (marketFileProgressBar.opacity < OPACITY_MIN) { marketFileProgressBar.opacity = OPACITY_MIN } - point4 = { - x: 0, - y: thisObject.container.frame.height - 6 - } + marketFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) + marketFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', marketFileProgressBar.opacity.toString()) - /* Now the transformations. */ + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = { + x: 0, + y: thisObject.container.frame.height - 1 + } - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + point2 = { + x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 1 + } - browserCanvasContext.fillStyle = dailyFileProgressBar.fillStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = dailyFileProgressBar.strokeStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + point3 = { + x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 3 + } - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() + point4 = { + x: 0, + y: thisObject.container.frame.height - 3 + } - /* We draw here the Single File Progress Bar. */ + /* Now the transformations. */ - /* Animate */ + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) - if (singleFileProgressBar.animatedValue < singleFileProgressBar.value) { - singleFileProgressBar.animatedValue = singleFileProgressBar.animatedValue + ANIMATED_INCREMENT - singleFileProgressBar.opacity = singleFileProgressBar.opacity + OPACITY_INCREMENT - } + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() - if (singleFileProgressBar.animatedValue >= 100) { - singleFileProgressBar.animatedValue = 100 + browserCanvasContext.fillStyle = marketFileProgressBar.fillStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = marketFileProgressBar.strokeStyle.replace('@Opacity', marketFileProgressBar.opacity.toString()) - singleFileProgressBar.opacity = singleFileProgressBar.opacity - OPACITY_INCREMENT - if (singleFileProgressBar.opacity < OPACITY_MIN) { singleFileProgressBar.opacity = OPACITY_MIN } + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() - singleFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) - singleFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) + /* We draw here the Daily Progress Bar. */ - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + /* Animate */ - point1 = { - x: 0, - y: thisObject.container.frame.height - 7 - } + if (dailyFileProgressBar.animatedValue < dailyFileProgressBar.value) { + dailyFileProgressBar.animatedValue = dailyFileProgressBar.animatedValue + ANIMATED_INCREMENT + dailyFileProgressBar.opacity = dailyFileProgressBar.opacity + OPACITY_INCREMENT + } - point2 = { - x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 7 - } + if (dailyFileProgressBar.animatedValue >= 100) { + dailyFileProgressBar.animatedValue = 100 - point3 = { - x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 9 - } + dailyFileProgressBar.opacity = dailyFileProgressBar.opacity - OPACITY_INCREMENT + if (dailyFileProgressBar.opacity < OPACITY_MIN) { dailyFileProgressBar.opacity = OPACITY_MIN } - point4 = { - x: 0, - y: thisObject.container.frame.height - 9 - } + dailyFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + dailyFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - /* Now the transformations. */ + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = { + x: 0, + y: thisObject.container.frame.height - 4 + } - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() + point2 = { + x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 4 + } - browserCanvasContext.fillStyle = singleFileProgressBar.fillStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = singleFileProgressBar.strokeStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) - - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() - - /* We draw here the File Sequence Progress Bar. */ + point3 = { + x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 6 + } - /* Animate */ - - if (fileSequenceProgressBar.animatedValue < fileSequenceProgressBar.value) { - fileSequenceProgressBar.animatedValue = fileSequenceProgressBar.animatedValue + ANIMATED_INCREMENT - fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity + OPACITY_INCREMENT - } + point4 = { + x: 0, + y: thisObject.container.frame.height - 6 + } - if (fileSequenceProgressBar.animatedValue >= 100) { - fileSequenceProgressBar.animatedValue = 100 + /* Now the transformations. */ - fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity - OPACITY_INCREMENT - if (fileSequenceProgressBar.opacity < OPACITY_MIN) { fileSequenceProgressBar.opacity = OPACITY_MIN } + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) - fileSequenceProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) - fileSequenceProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() - changeStatusTo(PRODUCT_CARD_STATUS.ON) - } + browserCanvasContext.fillStyle = dailyFileProgressBar.fillStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = dailyFileProgressBar.strokeStyle.replace('@Opacity', dailyFileProgressBar.opacity.toString()) - point1 = { - x: 0, - y: thisObject.container.frame.height - 10 - } + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() - point2 = { - x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 10 - } + /* We draw here the Single File Progress Bar. */ - point3 = { - x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, - y: thisObject.container.frame.height - 11 - } + /* Animate */ - point4 = { - x: 0, - y: thisObject.container.frame.height - 11 - } + if (singleFileProgressBar.animatedValue < singleFileProgressBar.value) { + singleFileProgressBar.animatedValue = singleFileProgressBar.animatedValue + ANIMATED_INCREMENT + singleFileProgressBar.opacity = singleFileProgressBar.opacity + OPACITY_INCREMENT + } + + if (singleFileProgressBar.animatedValue >= 100) { + singleFileProgressBar.animatedValue = 100 + + singleFileProgressBar.opacity = singleFileProgressBar.opacity - OPACITY_INCREMENT + if (singleFileProgressBar.opacity < OPACITY_MIN) { singleFileProgressBar.opacity = OPACITY_MIN } + + singleFileProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) + singleFileProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', singleFileProgressBar.opacity.toString()) + + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } + + point1 = { + x: 0, + y: thisObject.container.frame.height - 7 + } + + point2 = { + x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 7 + } + + point3 = { + x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 9 + } + + point4 = { + x: 0, + y: thisObject.container.frame.height - 9 + } + + /* Now the transformations. */ + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = singleFileProgressBar.fillStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = singleFileProgressBar.strokeStyle.replace('@Opacity', singleFileProgressBar.opacity.toString()) + + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() + + /* We draw here the File Sequence Progress Bar. */ + + /* Animate */ + + if (fileSequenceProgressBar.animatedValue < fileSequenceProgressBar.value) { + fileSequenceProgressBar.animatedValue = fileSequenceProgressBar.animatedValue + ANIMATED_INCREMENT + fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity + OPACITY_INCREMENT + } + + if (fileSequenceProgressBar.animatedValue >= 100) { + fileSequenceProgressBar.animatedValue = 100 + + fileSequenceProgressBar.opacity = fileSequenceProgressBar.opacity - OPACITY_INCREMENT + if (fileSequenceProgressBar.opacity < OPACITY_MIN) { fileSequenceProgressBar.opacity = OPACITY_MIN } + + fileSequenceProgressBar.fillStyle = LOADED_FILL_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + fileSequenceProgressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + + changeStatusTo(PRODUCT_CARD_STATUS.ON) + } + + point1 = { + x: 0, + y: thisObject.container.frame.height - 10 + } + + point2 = { + x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 10 + } + + point3 = { + x: thisObject.container.frame.width * fileSequenceProgressBar.animatedValue / 100, + y: thisObject.container.frame.height - 11 + } + + point4 = { + x: 0, + y: thisObject.container.frame.height - 11 + } + + /* Now the transformations. */ + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = fileSequenceProgressBar.fillStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + browserCanvasContext.strokeStyle = fileSequenceProgressBar.strokeStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) + + browserCanvasContext.fill() + browserCanvasContext.lineWidth = 0.1 + browserCanvasContext.stroke() + } +} - /* Now the transformations. */ - - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) - - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.closePath() - - browserCanvasContext.fillStyle = fileSequenceProgressBar.fillStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) - browserCanvasContext.strokeStyle = fileSequenceProgressBar.strokeStyle.replace('@Opacity', fileSequenceProgressBar.opacity.toString()) - - browserCanvasContext.fill() - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.stroke() - } - } From 310e2e59d8b3c23dd98e189cf4c732b03573ba5f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 9 Apr 2019 21:45:01 +0200 Subject: [PATCH 02/26] Layers Title Added --- Panels/ProductsPanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 3834e118a..333d99d0e 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -38,7 +38,7 @@ exchange = pExchange market = pMarket - thisObject.container.name = exchange + ' ' + market.assetB + '/' + market.assetA + ' ' + 'Indicators' + thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA thisObject.container.frame.containerName = thisObject.container.name thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE thisObject.container.frame.height = viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; From 3a4b07d9f3d33739d596a3ceae8c7bd8779ad4b1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 9 Apr 2019 22:00:03 +0200 Subject: [PATCH 03/26] Filtering out all the indicators of other teams --- Panels/ProductsPanel.js | 1 + SplashScreen.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 333d99d0e..72b5a6c94 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -66,6 +66,7 @@ let bot = devTeam.bots[j] if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } + if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== 'AAVikings')) { continue } if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { diff --git a/SplashScreen.js b/SplashScreen.js index 0697ad560..78ea7d85a 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -100,7 +100,7 @@ function newSplashScreen () { /* Second the % of Advance. */ let label = '' + Math.trunc(stepsInitializationCounter) + ' %' - stepsInitializationCounter = stepsInitializationCounter + 0.1 + stepsInitializationCounter = stepsInitializationCounter + 0.5 if (stepsInitializationCounter > 99) { splashScreenNeeded = false From ca15ff0fed6e769e0ce883d1ee7550e1cf4a3927 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 09:43:31 +0200 Subject: [PATCH 04/26] Filter all Indicators not ownn --- Panels/ProductsPanel.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 72b5a6c94..40c51bed0 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -55,6 +55,16 @@ panelTabButton.container.frame.parentFrame = thisObject.container.frame panelTabButton.initialize() + /* Get the current teams of the logged in user. */ + + let storedTeams = window.localStorage.getItem('userTeams') + let userTeams + let userTeam = {slug: ''} + if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') { + userTeams = JSON.parse(storedTeams) + userTeam = userTeams[0] // Currently we assume a user can be at only one team. + } + /* First thing is to build the productCards array */ let devTeams = ecosystem.getTeams() @@ -66,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')) { continue } + if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== 'AAVikings' && devTeam.codeName !== userTeam.slug)) { continue } if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { From f665ebf6a77c79640afdd6fa8f56eaa41f23c6ae Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 13:34:07 +0200 Subject: [PATCH 05/26] Improvements in Containers --- Canvas.js | 1 + Container.js | 69 ++++++++++++++++++++++------ Frame.js | 15 +++--- PlottersManager.js | 24 ++-------- Scales/{topScale.js => TimeScale.js} | 20 ++++---- Spaces/ChartSpace.js | 22 +++------ TimeMachine.js | 52 +++++++++++---------- TimelineChart.js | 20 ++------ 8 files changed, 117 insertions(+), 106 deletions(-) rename Scales/{topScale.js => TimeScale.js} (54%) diff --git a/Canvas.js b/Canvas.js index 4e6330e49..23df82e20 100644 --- a/Canvas.js +++ b/Canvas.js @@ -222,6 +222,7 @@ function newCanvas () { } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.stack = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/Container.js b/Container.js index 76eb3357f..60d54df14 100644 --- a/Container.js +++ b/Container.js @@ -1,6 +1,6 @@ function newContainer () { - var container = { + let thisObject = { frame: undefined, displacement: undefined, eventHandler: undefined, @@ -9,24 +9,63 @@ function newContainer () { isClickeable: false, isWheelable: false, name: undefined, - initialize: initialize + initialize: initialize, + connectToParent: connectToParent } - return container + let connectedToParentWidth = false + let connectedToParentHeight = false - function initialize () { - var frame = newFrame() - frame.initialize() - this.frame = frame - frame.container = container + return thisObject - var eventHandler = newEventHandler() - eventHandler.initialize() - eventHandler.name = container.name - this.eventHandler = eventHandler + function initialize (pName) { + thisObject.name = pName - var displacement = newDisplacement() - this.displacement = displacement - displacement.container = container + thisObject.frame = newFrame() + thisObject.frame.initialize() + thisObject.frame.containerName = pName + thisObject.frame.container = thisObject + + thisObject.eventHandler = newEventHandler() + thisObject.eventHandler.initialize() + thisObject.eventHandler.name = pName + + thisObject.displacement = newDisplacement() + thisObject.displacement.container = thisObject + thisObject.displacement.containerName = pName + } + + function connectToParent (parentContainer, onWidth, onHeight) { + connectedToParentWidth = onWidth + connectedToParentHeight = onHeight + + thisObject.displacement.parentDisplacement = parentContainer.displacement + thisObject.frame.parentFrame = parentContainer.frame + thisObject.parentContainer = parentContainer + thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + + if (connectedToParentWidth) { + thisObject.frame.width = thisObject.parentContainer.frame.width + } + if (connectedToParentHeight) { + thisObject.frame.height = thisObject.parentContainer.frame.height + } + } + + function onParentDimmensionsChanged () { + let dimmensionsChanged = false + if (connectedToParentWidth) { + thisObject.frame.width = thisObject.parentContainer.frame.width + dimmensionsChanged = true + } + if (connectedToParentHeight) { + thisObject.frame.height = thisObject.parentContainer.frame.height + dimmensionsChanged = true + } + + if (dimmensionsChanged) { + thisObject.eventHandler.raiseEvent('Dimmensions Changed') + console.log(thisObject.name + ' new width = ' + thisObject.frame.width) + } } } diff --git a/Frame.js b/Frame.js index 7ae3e4f29..93a4627e0 100644 --- a/Frame.js +++ b/Frame.js @@ -241,7 +241,7 @@ function newFrame () { return true } - function isThisPointHere (point, outsideViewPort) { + function isThisPointHere (point, outsideViewPort, dontTransform) { // The second parameter is usefull when you want to check a point that you already know is outside the viewport. /* We need not to modify the point received, so me make a copy of it. */ @@ -253,12 +253,13 @@ function newFrame () { /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ - - if (outsideViewPort === true) { - checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) - checkPoint = this.container.frame.unframeThisPoint(checkPoint) - } else { - checkPoint = unTransformThisPoint(checkPoint, frame.container) + if (dontTransform === false || dontTransform === undefined) { + if (outsideViewPort === true) { + checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) + checkPoint = this.container.frame.unframeThisPoint(checkPoint) + } else { + checkPoint = unTransformThisPoint(checkPoint, frame.container) + } } /* Now we check if the resulting point is whin the current Frame. */ diff --git a/PlottersManager.js b/PlottersManager.js index 80f07e8ef..2c0acc40e 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -23,12 +23,8 @@ function newPlottersManager () { finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container - - container.displacement.containerName = 'Plotter Manager' - container.frame.containerName = 'Plotter Manager' + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) let initializationReady = false @@ -255,13 +251,7 @@ function newPlottersManager () { let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName) - plotter.container.displacement.parentDisplacement = thisObject.container.displacement - plotter.container.frame.parentFrame = thisObject.container.frame - - plotter.container.parentContainer = thisObject.container - - plotter.container.frame.width = thisObject.container.frame.width * 1 - plotter.container.frame.height = thisObject.container.frame.height * 1 + plotter.container.connectToParent(thisObject.container, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -503,13 +493,7 @@ function newPlottersManager () { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName) - plotter.container.displacement.parentDisplacement = thisObject.container.displacement - plotter.container.frame.parentFrame = thisObject.container.frame - - plotter.container.parentContainer = thisObject.container - - plotter.container.frame.width = thisObject.container.frame.width * 1 - plotter.container.frame.height = thisObject.container.frame.height * 1 + plotter.container.connectToParent(thisObject.container, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 diff --git a/Scales/topScale.js b/Scales/TimeScale.js similarity index 54% rename from Scales/topScale.js rename to Scales/TimeScale.js index bfe552c39..8d773322d 100644 --- a/Scales/topScale.js +++ b/Scales/TimeScale.js @@ -1,9 +1,10 @@ -function newRigthScale () { +function newTimeScale () { let thisObject = { container: undefined, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + lenghtPercentage: 100 } const RIGHT_MARGIN = 50 @@ -12,8 +13,8 @@ function newRigthScale () { container.initialize() thisObject.container = container - thisObject.container.frame.width = RIGHT_MARGIN - thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y + thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x + thisObject.container.frame.height = 50 container.frame.position.x = viewPort.visibleArea.bottomRight.x container.frame.position.y = TOP_SPACE_HEIGHT @@ -30,10 +31,13 @@ function newRigthScale () { function onMouseWheel (pDelta) { if (pDelta < 0) { - pDelta = -0.1 + thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10 + if (thisObject.lenghtPercentage < 50) { thisObject.lenghtPercentage = 50 } } else { - pDelta = 0.1 + thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10 + if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 } } + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', thisObject.lenghtPercentage) } function getContainer (point) { @@ -41,7 +45,7 @@ function newRigthScale () { /* First we check if this point is inside this object UI. */ - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return this.container } else { /* This point does not belong to this space. */ @@ -51,6 +55,6 @@ function newRigthScale () { } function draw () { - + thisObject.container.frame.draw(false, true) } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index b047ad9ae..fecd50541 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -23,20 +23,16 @@ function newChartSpace () { finalize: finalize } - var container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.frame.width = CHART_SPACE_WIDTH thisObject.container.frame.height = CHART_SPACE_HEIGHT - container.displacement.containerName = 'Chart Space' - container.frame.containerName = 'Chart Space' + 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 - container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 - container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 - - container.isDraggeable = false + thisObject.container.isDraggeable = false return thisObject @@ -63,16 +59,10 @@ function newChartSpace () { var timeMachine = newTimeMachine() - timeMachine.container.displacement.parentDisplacement = this.container.displacement - timeMachine.container.frame.parentFrame = this.container.frame - - timeMachine.container.parentContainer = this.container + timeMachine.container.connectToParent(thisObject.container, true, true) /* We make the time machine a little bit smaller than the current space. */ - timeMachine.container.frame.width = this.container.frame.width * 1 - timeMachine.container.frame.height = this.container.frame.height * 1 - timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 diff --git a/TimeMachine.js b/TimeMachine.js index 492397d7d..d469dc08f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -25,18 +25,16 @@ function newTimeMachine () { finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.isDraggeable = false - container.displacement.containerName = 'Time Machine' - container.frame.containerName = 'Time Machine' - let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... - // ... also to request a reference to the object for the cases we need it. + // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 + let timeScale + return thisObject function finalize () { @@ -55,24 +53,27 @@ function newTimeMachine () { function initialize (callBackFunction) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - /* Each Time Machine has a Control Panel. */ + /* Each Time Machine has a Control Panel. */ let panelOwner = 'Global' controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) - /* 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. */ + /* Each Time Machine has a Time Scale. */ + + timeScale = newTimeScale() + timeScale.initialize() + + timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', onTimeScaleChanged) + + /* 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. let timelineChart = newTimelineChart() - timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement - timelineChart.container.frame.parentFrame = thisObject.container.frame + timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.parentContainer = thisObject.container - - timelineChart.container.frame.width = thisObject.container.frame.width * 1 timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -131,12 +132,8 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement - timelineChart.container.frame.parentFrame = thisObject.container.frame + timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.parentContainer = thisObject.container - - timelineChart.container.frame.width = thisObject.container.frame.width * 1 timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -164,6 +161,11 @@ function newTimeMachine () { } } + function onTimeScaleChanged (newPercentageLength) { + thisObject.container.frame.width = thisObject.container.parentContainer.frame.width * newPercentageLength / 100 + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed') + } + function drawBackground () { for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i] @@ -178,6 +180,8 @@ function newTimeMachine () { let chart = this.charts[i] chart.draw() } + + timeScale.draw() } function getContainer (point) { @@ -187,14 +191,12 @@ function newTimeMachine () { /* Now we see which is the inner most container that has it */ + container = timeScale.getContainer(point) + if (container !== undefined) { return container } + for (let i = 0; i < this.charts.length; i++) { container = this.charts[i].getContainer(point) - - if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ - - return container - } + if (container !== undefined) { return container } } /* The point does not belong to any inner container, so we return the current container. */ diff --git a/TimelineChart.js b/TimelineChart.js index 3058a650d..142fa0c0a 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -21,12 +21,8 @@ finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container - - container.displacement.containerName = 'Timeline Chart' - container.frame.containerName = 'Timeline Chart' + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) let chartGrid let breakpointsBar @@ -114,12 +110,12 @@ chartGrid.initialize() breakpointsBar = newBreakpointsBar() - breakpointsBar.initialize(container, timeLineCoordinateSystem) + breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) recalculateScale() // moveViewPortToCurrentDatetime(); - moveToUserPosition(container, timeLineCoordinateSystem) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem) timePeriod = INITIAL_TIME_PERIOD datetime = INITIAL_DATE @@ -132,13 +128,7 @@ plotterManager = newPlottersManager() - plotterManager.container.displacement.parentDisplacement = thisObject.container.displacement - plotterManager.container.frame.parentFrame = thisObject.container.frame - - plotterManager.container.parentContainer = thisObject.container - - plotterManager.container.frame.width = thisObject.container.frame.width - plotterManager.container.frame.height = thisObject.container.frame.height + plotterManager.container.connectToParent(thisObject.container, true, true) plotterManager.container.frame.position.x = 0 plotterManager.container.frame.position.y = 0 From 2bb58adadc6343a2f6e4e458276e6a539eb6f138 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 13:51:34 +0200 Subject: [PATCH 06/26] Error Logging Improved --- Animation.js | 14 +++++++------- Canvas.js | 31 +++++++++++++++---------------- CompetitionStorage.js | 8 ++++---- Dashboard.js | 14 +++++++------- FloatingSpace/FloatingLayer.js | 2 +- FloatingSpace/NoteSets.js | 8 ++++---- FloatingSpace/ProfileBalls.js | 4 ++-- PlottersManager.js | 22 +++++++++++----------- ProductCard.js | 2 +- ProductStorage.js | 14 +++++++------- Spaces/ChartSpace.js | 2 +- Spaces/FloatingSpace.js | 2 +- Spaces/PanelsSpace.js | 14 +++++++------- TimeMachine.js | 2 +- TimelineChart.js | 4 ++-- 15 files changed, 71 insertions(+), 72 deletions(-) diff --git a/Animation.js b/Animation.js index aec3a28ae..063725ada 100644 --- a/Animation.js +++ b/Animation.js @@ -34,7 +34,7 @@ function newAnimation () { thisObject.stop() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } }s } @@ -45,7 +45,7 @@ function newAnimation () { /* Nothing to do here yet. */ callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -56,7 +56,7 @@ function newAnimation () { animationLoop() // Inside this function the animation process is started, and at the same time it creates a loop. } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -67,7 +67,7 @@ function newAnimation () { window.cancelAnimationFrame(animationLoopHandle) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] stop -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] stop -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -78,7 +78,7 @@ function newAnimation () { callBackFunctions.set(key, callBack) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addCallBackFunction -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] addCallBackFunction -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -89,7 +89,7 @@ function newAnimation () { callBackFunctions.delete(key) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] removeCallBackFunction -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] removeCallBackFunction -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -126,7 +126,7 @@ function newAnimation () { animationLoopHandle = window.requestAnimationFrame(animationLoop) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err.stack) } } } diff --git a/Canvas.js b/Canvas.js index 23df82e20..1ce920ec7 100644 --- a/Canvas.js +++ b/Canvas.js @@ -103,7 +103,7 @@ function newCanvas () { // IE 6/7/8 else browserCanvas.detachEvent('onmousewheel', onMouseWheel) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -138,7 +138,7 @@ function newCanvas () { viewPort.raiseEvents() // These events will impacts on objects just initialized. } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -182,7 +182,7 @@ function newCanvas () { /* Display some Error Page here. */ } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -211,18 +211,17 @@ function newCanvas () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.stack = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -237,7 +236,7 @@ function newCanvas () { viewPort.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) } } } @@ -268,7 +267,7 @@ function newCanvas () { e.preventDefault() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err.stack) } } } @@ -355,7 +354,7 @@ function newCanvas () { viewPortBeingDragged = true } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } } @@ -421,7 +420,7 @@ function newCanvas () { return } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) } } } @@ -450,7 +449,7 @@ function newCanvas () { browserCanvas.style.cursor = 'auto' } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } } } @@ -486,7 +485,7 @@ function newCanvas () { onMouseOver(event) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) } } } @@ -554,7 +553,7 @@ function newCanvas () { return } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } } } @@ -612,7 +611,7 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } } } @@ -679,7 +678,7 @@ function newCanvas () { dragVector.downY = dragVector.upY } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) } } } } diff --git a/CompetitionStorage.js b/CompetitionStorage.js index 727b2a383..aebec6a93 100644 --- a/CompetitionStorage.js +++ b/CompetitionStorage.js @@ -38,7 +38,7 @@ function newCompetitionStorage (pName) { thisObject.fileSequences = undefined } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -120,7 +120,7 @@ function newCompetitionStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -134,7 +134,7 @@ function newCompetitionStorage (pName) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -147,7 +147,7 @@ function newCompetitionStorage (pName) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/Dashboard.js b/Dashboard.js index a7ec436b1..426e7fbad 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -46,7 +46,7 @@ function newDashboard () { setTimeout(delayedStart, DEBUG_START_UP_DELAY) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) } } } @@ -69,7 +69,7 @@ function newDashboard () { canvas = newCanvas() canvas.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err.stack) } } } @@ -79,7 +79,7 @@ function newDashboard () { canvas.topSpace.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err.stack) } } } @@ -94,7 +94,7 @@ function newDashboard () { viewPort.initialize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] browserResized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] browserResized -> err = ' + err.stack) } } } @@ -227,7 +227,7 @@ function newDashboard () { }) .catch(err => { if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> Error fetching data from Teams Module.') } - if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> err = ' + err.stack) } reject(err) }) }) @@ -261,10 +261,10 @@ function newDashboard () { callBack() }, err => { if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> Error fetching data from Teams Module.') } - if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err.stack) } }) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err.stack) } } } } diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 419e8213c..0f83cf7e8 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -74,7 +74,7 @@ function newFloatingLayer () { visibleFloatingObjects = [] dyingFloatingObjects = [] } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index b1e8c42fd..d3e2ce42e 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -43,7 +43,7 @@ function newNoteSets () { callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -296,11 +296,11 @@ function newNoteSets () { if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> noteSet.floatingNotes.length = ' + noteSet.floatingNotes.length) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> err = ' + err.stack) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -330,7 +330,7 @@ function newNoteSets () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] destroyNoteSet -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] destroyNoteSet -> err = ' + err.stack) } } } } diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 73c0baed5..de67bfca6 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -31,7 +31,7 @@ function newProfileBalls () { floatingLayer.finalize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -43,7 +43,7 @@ function newProfileBalls () { callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/PlottersManager.js b/PlottersManager.js index 2c0acc40e..8b5902696 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -90,7 +90,7 @@ function newPlottersManager () { competitionPlotters.splice(i, 1) // Delete item from array. } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -192,17 +192,17 @@ function newPlottersManager () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> onProductPlottersInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> onProductPlottersInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -329,17 +329,17 @@ function newPlottersManager () { callBack(GLOBAL.DEFAULT_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> onPlotterInizialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -411,7 +411,7 @@ function newPlottersManager () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotters -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotters -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -585,17 +585,17 @@ function newPlottersManager () { callBack(GLOBAL.DEFAULT_OK_RESPONSE) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> err = ' + err.stack) } callBack(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/ProductCard.js b/ProductCard.js index b90a0bbb0..ada217471 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -254,7 +254,7 @@ function newProductCard () { botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } } } diff --git a/ProductStorage.js b/ProductStorage.js index eca08a096..93bc938fd 100644 --- a/ProductStorage.js +++ b/ProductStorage.js @@ -77,7 +77,7 @@ function newProductStorage (pName) { thisObject.fileSequences = undefined } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -202,7 +202,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onMarketFileReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onMarketFileReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -257,7 +257,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onDailyFileReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onDailyFileReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -309,7 +309,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onSingleFileReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onSingleFileReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -361,7 +361,7 @@ function newProductStorage (pName) { checkInitializeComplete() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -378,13 +378,13 @@ function newProductStorage (pName) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index fecd50541..1e7ee8abf 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -45,7 +45,7 @@ function newChartSpace () { timeMachine.finalize() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 6e1a22446..0e0010638 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -25,7 +25,7 @@ function newFloatingSpace () { thisObject.floatingLayer.finalize() thisObject.profileBalls.finalize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index cd203c8ae..5378671d2 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -126,17 +126,17 @@ function newPanelsSpace () { so panels overlapping others are picked firt although they are drawn last. */ + if (thisObject.panels !== undefined) { + for (var i = thisObject.panels.length - 1; i >= 0; i--) { + container = thisObject.panels[i].getContainer(point) - for (var i = thisObject.panels.length - 1; i >= 0; i--) { - container = thisObject.panels[i].getContainer(point) + if (container !== undefined) { + /* We found an inner container which has the point. We return it. */ - if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ - - return container + return container + } } } - /* The point does not belong to any inner container, so we return the current container. */ return thisObject.container diff --git a/TimeMachine.js b/TimeMachine.js index d469dc08f..0d2e6f4ae 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -46,7 +46,7 @@ function newTimeMachine () { chart.finalize() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } diff --git a/TimelineChart.js b/TimelineChart.js index 142fa0c0a..4975f51ea 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -55,7 +55,7 @@ plotterManager.finalize() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } @@ -158,7 +158,7 @@ recalculateScale() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } From 01202baec67b78fe91ebe07596a639df0e93e821 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 15:18:51 +0200 Subject: [PATCH 07/26] Semi Working --- TimeMachine.js | 10 ++++------ TimelineChart.js | 6 ++++++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/TimeMachine.js b/TimeMachine.js index 0d2e6f4ae..90106c4df 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -64,7 +64,10 @@ function newTimeMachine () { timeScale = newTimeScale() timeScale.initialize() - timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', onTimeScaleChanged) + timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (newPercentageLength) { + thisObject.container.frame.width = thisObject.container.parentContainer.frame.width * newPercentageLength / 100 + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed') + }) /* 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. */ @@ -161,11 +164,6 @@ function newTimeMachine () { } } - function onTimeScaleChanged (newPercentageLength) { - thisObject.container.frame.width = thisObject.container.parentContainer.frame.width * newPercentageLength / 100 - thisObject.container.eventHandler.raiseEvent('Dimmensions Changed') - } - function drawBackground () { for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i] diff --git a/TimelineChart.js b/TimelineChart.js index 4975f51ea..29d94c41e 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -63,6 +63,12 @@ try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', onContainerDimmensionsChanged) + + function onContainerDimmensionsChanged () { + recalculateScale() + } + /* We load the logow we will need for the background. */ exchange = pExchange market = pMarket From a9c1dd6eccf159b4f257a95d680a6bd4db8e7a68 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 15:43:53 +0200 Subject: [PATCH 08/26] Changes is Mouse Wheel --- BottomSpace/ChartAspectRatio.js | 12 +++++++----- Canvas.js | 8 +++++--- Panels/ProductsPanel.js | 11 ++++++----- Scales/RightScale.js | 9 +++++---- Scales/TimeScale.js | 5 +++-- Spaces/ChartSpace.js | 2 +- TimeMachine.js | 4 ++-- 7 files changed, 29 insertions(+), 22 deletions(-) diff --git a/BottomSpace/ChartAspectRatio.js b/BottomSpace/ChartAspectRatio.js index 16b4ffe3d..e32b17292 100644 --- a/BottomSpace/ChartAspectRatio.js +++ b/BottomSpace/ChartAspectRatio.js @@ -53,16 +53,18 @@ container.frame.position.y = viewPort.visibleArea.bottomLeft.y } - function onMouseWheel (pDelta) { + function onMouseWheel (event) { + delta = event.wheelDelta + if (viewPort.isMinZoom() === false) { return } // We only make this button to work at the min zoom level. - if (pDelta < 0) { - pDelta = -0.1 + if (delta < 0) { + delta = -0.1 } else { - pDelta = 0.1 + delta = 0.1 } - thisObject.aspectRatio.y = thisObject.aspectRatio.y + pDelta + 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) { diff --git a/Canvas.js b/Canvas.js index 1ce920ec7..aff397357 100644 --- a/Canvas.js +++ b/Canvas.js @@ -572,10 +572,12 @@ function newCanvas () { y: event.pageY - window.canvasApp.topMargin } + event.mousePosition = point + let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) if (panelContainer !== undefined && panelContainer.isWheelable === true) { - panelContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta) + panelContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -593,7 +595,7 @@ function newCanvas () { let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) if (bottomContainer !== undefined && bottomContainer.isWheeleable === true) { - bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta) + bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -602,7 +604,7 @@ function newCanvas () { let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }) if (chartContainer !== undefined && chartContainer.isWheeleable === true) { - chartContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta) + chartContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } else { /* If all the above fails, we fallback into applying zoom to the viewPort */ diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 40c51bed0..506460406 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -138,14 +138,15 @@ isInitialized = true } - function onMouseWheel (pDelta) { - if (pDelta > 0) { - pDelta = -1 + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta > 0) { + delta = -1 } else { - pDelta = 1 + delta = 1 } - firstVisibleCard = firstVisibleCard + pDelta + firstVisibleCard = firstVisibleCard + delta let availableSlots = visibleProductCards.length diff --git a/Scales/RightScale.js b/Scales/RightScale.js index c37f63994..fc6a7ae3d 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -28,11 +28,12 @@ thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) } - function onMouseWheel (pDelta) { - if (pDelta < 0) { - pDelta = -0.1 + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { + delta = -0.1 } else { - pDelta = 0.1 + delta = 0.1 } } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 8d773322d..dad410593 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -29,8 +29,9 @@ function newTimeScale () { thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) } - function onMouseWheel (pDelta) { - if (pDelta < 0) { + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10 if (thisObject.lenghtPercentage < 50) { thisObject.lenghtPercentage = 50 } } else { diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 1e7ee8abf..39ef77ea7 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -27,7 +27,7 @@ function newChartSpace () { thisObject.container.initialize(MODULE_NAME) thisObject.container.frame.width = CHART_SPACE_WIDTH - thisObject.container.frame.height = CHART_SPACE_HEIGHT + thisObject.container.frame.height = CHART_SPACE_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 diff --git a/TimeMachine.js b/TimeMachine.js index 90106c4df..8f4719253 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -77,7 +77,7 @@ function newTimeMachine () { timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y + timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position @@ -137,7 +137,7 @@ function newTimeMachine () { timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y + timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position From 94aa082b6bb36e69403cfc9b46b35702cb248231 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 17:52:09 +0200 Subject: [PATCH 09/26] Formula almost working --- Globals.js | 4 ++-- PlottersManager.js | 2 +- Scales/TimeScale.js | 3 ++- Spaces/ChartSpace.js | 10 +++++----- TimeMachine.js | 20 ++++++++++++++++++-- TimelineChart.js | 2 +- ViewPort.js | 3 ++- 7 files changed, 31 insertions(+), 13 deletions(-) diff --git a/Globals.js b/Globals.js index 167583e09..b755b7437 100644 --- a/Globals.js +++ b/Globals.js @@ -172,8 +172,8 @@ const MAX_PLOTABLE_DATE = maxDate; We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space. */ -const CHART_SPACE_WIDTH = browserCanvas.width * 1000; -const CHART_SPACE_HEIGHT = browserCanvas.height * 100; +const TIME_MACHINE_WIDTH = browserCanvas.width * 1000; +const TIME_MACHINE_HEIGHT = browserCanvas.height * 100; function toRadians(angle) { return angle * (Math.PI / 180); diff --git a/PlottersManager.js b/PlottersManager.js index 8b5902696..bb4760a88 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -114,7 +114,7 @@ function newPlottersManager () { canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged) function onAspectRatioChanged (pAspectRatio) { - thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y + thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y /* First the Product Plotters. */ diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index dad410593..922f1876e 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -38,7 +38,8 @@ function newTimeScale () { thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10 if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 } } - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', thisObject.lenghtPercentage) + event.lenghtPercentage = thisObject.lenghtPercentage + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) } function getContainer (point) { diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 39ef77ea7..14424f0e1 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -25,13 +25,13 @@ function newChartSpace () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - - thisObject.container.frame.width = CHART_SPACE_WIDTH - thisObject.container.frame.height = CHART_SPACE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y +/* + 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 @@ -59,7 +59,7 @@ function newChartSpace () { var timeMachine = newTimeMachine() - timeMachine.container.connectToParent(thisObject.container, true, true) + // timeMachine.container.connectToParent(thisObject.container, true, true) /* We make the time machine a little bit smaller than the current space. */ diff --git a/TimeMachine.js b/TimeMachine.js index 8f4719253..d97266fbf 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -29,6 +29,12 @@ function newTimeMachine () { thisObject.container.initialize(MODULE_NAME) thisObject.container.isDraggeable = false + 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 - TIME_MACHINE_WIDTH / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2 + let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 @@ -64,8 +70,18 @@ function newTimeMachine () { timeScale = newTimeScale() timeScale.initialize() - timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (newPercentageLength) { - thisObject.container.frame.width = thisObject.container.parentContainer.frame.width * newPercentageLength / 100 + timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { + newPercentageLength = event.lenghtPercentage + + let a = event.mousePosition.x + let b = (browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2) * (-1) + let d = TIME_MACHINE_WIDTH + let f = TIME_MACHINE_WIDTH * newPercentageLength / 100 + let g = viewPort.displacement.x + let c = (((a + b + g) / d) * f) - a - g + + thisObject.container.frame.width = f + thisObject.container.frame.position.x = c * (-1) thisObject.container.eventHandler.raiseEvent('Dimmensions Changed') }) diff --git a/TimelineChart.js b/TimelineChart.js index 29d94c41e..de81053d5 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -160,7 +160,7 @@ canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged) function onAspectRatioChanged (pAspectRatio) { - thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y + thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y recalculateScale() } } catch (err) { diff --git a/ViewPort.js b/ViewPort.js index cdebcd76f..d5134bfae 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -15,6 +15,7 @@ function newViewPort () { zoomTargetLevel: undefined, zoomLevel: undefined, mousePosition: undefined, + offset: undefined, newZoomLevel: newZoomLevel, applyZoom: applyZoom, isMinZoom: isMinZoom, @@ -33,7 +34,7 @@ function newViewPort () { let increment = 0.035 - var offset = { + let offset = { x: 0, y: 0 } From a6e22aaf9ccc4ee7e1188b36225f42a317a832fd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 20:58:16 +0200 Subject: [PATCH 10/26] All working, from User Position ,that is currently the middle of the screen. --- Container.js | 4 ++-- Scales/ChartGrid.js | 2 ++ Scales/TimeScale.js | 4 ++-- Spaces/ChartSpace.js | 2 +- TimeMachine.js | 16 +++------------- TimelineChart.js | 34 ++-------------------------------- ViewPort.js | 11 +++++++++-- 7 files changed, 21 insertions(+), 52 deletions(-) diff --git a/Container.js b/Container.js index 60d54df14..8d3ddbc61 100644 --- a/Container.js +++ b/Container.js @@ -52,7 +52,7 @@ function newContainer () { } } - function onParentDimmensionsChanged () { + function onParentDimmensionsChanged (event) { let dimmensionsChanged = false if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -64,7 +64,7 @@ function newContainer () { } if (dimmensionsChanged) { - thisObject.eventHandler.raiseEvent('Dimmensions Changed') + thisObject.eventHandler.raiseEvent('Dimmensions Changed', event) console.log(thisObject.name + ' new width = ' + thisObject.frame.width) } } diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js index 2b695bb43..cfa0f4304 100644 --- a/Scales/ChartGrid.js +++ b/Scales/ChartGrid.js @@ -416,6 +416,8 @@ } function plotGrid (period) { + return + let periodWidth = period.x let periodHeight = period.y diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 922f1876e..4cd15c3e2 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -33,7 +33,7 @@ function newTimeScale () { delta = event.wheelDelta if (delta < 0) { thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10 - if (thisObject.lenghtPercentage < 50) { thisObject.lenghtPercentage = 50 } + if (thisObject.lenghtPercentage < 10) { thisObject.lenghtPercentage = 10 } } else { thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10 if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 } @@ -57,6 +57,6 @@ function newTimeScale () { } function draw () { - thisObject.container.frame.draw(false, true) + } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 14424f0e1..fc8cc4010 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -96,7 +96,7 @@ function newChartSpace () { } function draw () { - thisObject.container.frame.draw(false, false) + // thisObject.container.frame.draw(false, false) for (var i = 0; i < thisObject.timeMachines.length; i++) { var timeMachine = thisObject.timeMachines[i] diff --git a/TimeMachine.js b/TimeMachine.js index d97266fbf..acc561f79 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -71,18 +71,8 @@ function newTimeMachine () { timeScale.initialize() timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { - newPercentageLength = event.lenghtPercentage - - let a = event.mousePosition.x - let b = (browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2) * (-1) - let d = TIME_MACHINE_WIDTH - let f = TIME_MACHINE_WIDTH * newPercentageLength / 100 - let g = viewPort.displacement.x - let c = (((a + b + g) / d) * f) - a - g - - thisObject.container.frame.width = f - thisObject.container.frame.position.x = c * (-1) - thisObject.container.eventHandler.raiseEvent('Dimmensions Changed') + 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. */ @@ -188,7 +178,7 @@ function newTimeMachine () { } function draw () { - this.container.frame.draw(false, false) + // this.container.frame.draw(false, false) for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i] diff --git a/TimelineChart.js b/TimelineChart.js index de81053d5..2344799d4 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -65,8 +65,9 @@ thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', onContainerDimmensionsChanged) - function onContainerDimmensionsChanged () { + function onContainerDimmensionsChanged (event) { recalculateScale() + moveToUserPosition(thisObject.container, timeLineCoordinateSystem) } /* We load the logow we will need for the background. */ @@ -120,7 +121,6 @@ recalculateScale() - // moveViewPortToCurrentDatetime(); moveToUserPosition(thisObject.container, timeLineCoordinateSystem) timePeriod = INITIAL_TIME_PERIOD datetime = INITIAL_DATE @@ -465,34 +465,4 @@ } } } - - function moveViewPortToCurrentDatetime () { - if (INFO_LOG === true) { logger.write('[INFO] moveViewPortToCurrentDatetime -> Entering function.') } - - let targetPoint = { - x: datetime.valueOf(), - y: 0 // we wont touch the y axis here. - } - - /* Lets put this point in the coordinate system of the viewPort */ - - targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint) - targetPoint = transformThisPoint(targetPoint, thisObject.container) - - /* Lets get the point on the viewPort coordinate system of the center of the visible screen */ - - let center = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 - } - - /* Lets calculate the displace vector, from the point we want at the center, to the current center. */ - - let displaceVector = { - x: center.x - targetPoint.x, - y: 0 - } - - viewPort.displace(displaceVector) - } } diff --git a/ViewPort.js b/ViewPort.js index d5134bfae..b61c4deef 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -15,7 +15,7 @@ function newViewPort () { zoomTargetLevel: undefined, zoomLevel: undefined, mousePosition: undefined, - offset: undefined, + getDisplacement: getDisplacement, newZoomLevel: newZoomLevel, applyZoom: applyZoom, isMinZoom: isMinZoom, @@ -67,6 +67,14 @@ function newViewPort () { } } + function getDisplacement () { + let displacement = { + x: offset.x, + y: offset.y + } + return displacement + } + function raiseEvents () { let event = { newOffset: offset @@ -387,4 +395,3 @@ function newViewPort () { browserCanvasContext.stroke() } } - From f3ccf2f186a2946e6abb0ef976865a1ac79b6035 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 00:42:48 +0200 Subject: [PATCH 11/26] Move to user position --- Container.js | 1 - Scales/TimeScale.js | 2 +- TopSpace/Login.js | 620 ++++++++++++++++++++++---------------------- Utilities.js | 21 +- 4 files changed, 332 insertions(+), 312 deletions(-) diff --git a/Container.js b/Container.js index 8d3ddbc61..7cdae58ad 100644 --- a/Container.js +++ b/Container.js @@ -65,7 +65,6 @@ function newContainer () { if (dimmensionsChanged) { thisObject.eventHandler.raiseEvent('Dimmensions Changed', event) - console.log(thisObject.name + ' new width = ' + thisObject.frame.width) } } } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 4cd15c3e2..6c2a54884 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -14,7 +14,7 @@ function newTimeScale () { thisObject.container = container thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x - thisObject.container.frame.height = 50 + thisObject.container.frame.height = 100 container.frame.position.x = viewPort.visibleArea.bottomRight.x container.frame.position.y = TOP_SPACE_HEIGHT diff --git a/TopSpace/Login.js b/TopSpace/Login.js index 748b40ea7..bca896575 100644 --- a/TopSpace/Login.js +++ b/TopSpace/Login.js @@ -1,5 +1,11 @@ function newLogin () { + const MODULE_NAME = 'Login' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + let thisObject = { container: undefined, draw: draw, @@ -27,337 +33,341 @@ function newLogin () { return thisObject async function initialize (pSharedStatus) { - const accessToken = window.localStorage.getItem('access_token') - let user = window.localStorage.getItem('user') + try { + const accessToken = window.localStorage.getItem('access_token') + let user = window.localStorage.getItem('user') - sharedStatus = pSharedStatus + sharedStatus = pSharedStatus - if (user === null) { - // if there is no user that means that we are logged off, which means it is time to clean the local storage of things from the last log in. + if (user === null) { + // if there is no user that means that we are logged off, which means it is time to clean the local storage of things from the last log in. - window.localStorage.removeItem('loggedInUser') - window.localStorage.removeItem('sessionToken') - return - } + window.localStorage.removeItem('loggedInUser') + window.localStorage.removeItem('sessionToken') + return + } - user = JSON.parse(user) + user = JSON.parse(user) - const authId = user.authId + const authId = user.authId - let sessionToken + let sessionToken - const apolloClient = new Apollo.lib.ApolloClient({ - networkInterface: Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl, - transportBatching: true - }), - connectToDevTools: true - }) + const apolloClient = new Apollo.lib.ApolloClient({ + networkInterface: Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl, + transportBatching: true + }), + connectToDevTools: true + }) - const USERS_QUERY = Apollo.gql` - query($authId: String){ - users_UserByAuthId (authId: $authId){ - id - referrerId - alias - firstName - middleName - lastName - bio - email - emailVerified - isDeveloper - isDataAnalyst - isTrader - avatarHandle - avatarChangeDate - sessionToken - role { - id - } - } + const USERS_QUERY = Apollo.gql` + query($authId: String){ + users_UserByAuthId (authId: $authId){ + id + referrerId + alias + firstName + middleName + lastName + bio + email + emailVerified + isDeveloper + isDataAnalyst + isTrader + avatarHandle + avatarChangeDate + sessionToken + role { + id + } + } + } + ` + const getUser = () => { + return new Promise((resolve, reject) => { + apolloClient.query({ + query: USERS_QUERY, + variables: { + authId: authId } - ` - const getUser = () => { - return new Promise((resolve, reject) => { - apolloClient.query({ - query: USERS_QUERY, - variables: { - authId: authId + }) + .then(response => { + sessionToken = response.data.users_UserByAuthId.sessionToken + + window.localStorage.setItem('loggedInUser', JSON.stringify(response.data.users_UserByAuthId)) + resolve({ user: response.data.users_UserByAuthId}) + }) + .catch(error => { + console.log('apolloClient error getting user query', error) + reject(error) + }) + }) + } + + /* Getting all Teams */ + + const networkInterfaceTeams = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + networkInterfaceTeams.use([{ + applyMiddleware (req, next) { + req.options.headers = { + authorization: `Bearer ${accessToken}` } - }) - .then(response => { - sessionToken = response.data.users_UserByAuthId.sessionToken - - window.localStorage.setItem('loggedInUser', JSON.stringify(response.data.users_UserByAuthId)) - resolve({ user: response.data.users_UserByAuthId}) - }) - .catch(error => { - console.log('apolloClient error getting user query', error) - reject(error) - }) - }) - } - - /* Getting all Teams */ - - const networkInterfaceTeams = Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl - }) - - networkInterfaceTeams.use([{ - applyMiddleware (req, next) { - req.options.headers = { - authorization: `Bearer ${accessToken}` + next() } - next() - } - }]) + }]) - const apolloClientTeams = new Apollo.lib.ApolloClient({ - networkInterface: networkInterfaceTeams, - connectToDevTools: true - }) - - const TEAM_BY_OWNER_QUERY = Apollo.gql` - query teamsByOwnerQuery { - teams_TeamsByOwner { - id - name - slug - profile { - avatar - banner - description - motto - updatedAt - } - members { - member { - alias - } - } - fb { - id - name - slug - avatar - kind - status { - status - reason - createdAt - } - } - } - } - ` - - const getTeamByOwner = () => { - return new Promise((resolve, reject) => { - apolloClientTeams.query({ - query: TEAM_BY_OWNER_QUERY - }) - .then(response => { - window.localStorage.setItem('userTeams', JSON.stringify(response.data.teams_TeamsByOwner)) - resolve({ teams: response.data.teams_TeamsByOwner}) - }) - .catch(error => { - console.log('apolloClient error getting user teams', error) - reject(error) - }) + const apolloClientTeams = new Apollo.lib.ApolloClient({ + networkInterface: networkInterfaceTeams, + connectToDevTools: true }) - } - /* Gettings All Events */ - - const networkInterfaceEvents = Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl - }) - - const apolloClientEvents = new Apollo.lib.ApolloClient({ - networkInterface: networkInterfaceEvents, - connectToDevTools: true, - addTypename: false - }) - - const EVENTS_QUERY = Apollo.gql` - query events($maxStartDate: Int, $minEndDate: Int){ - events_Events(maxStartDate: $maxStartDate, minEndDate: $minEndDate){ - id - title - startDatetime - endDatetime - participants{ - clone{ - id - team{ - slug - } - bot{ - slug - } - } - } - } - } - ` - - const getCurrentEvents = () => { - var d = new Date() - var nowSeconds = Math.round(d.getTime() / 1000) - var twoWeeksAgoSeconds = nowSeconds - 1209600 - return new Promise((resolve, reject) => { - apolloClientEvents.query({ - query: EVENTS_QUERY, - variables: { maxStartDate: nowSeconds, minEndDate: twoWeeksAgoSeconds } - }) - .then(response => { - window.localStorage.setItem('currentEvents', JSON.stringify(response.data.events_Events)) - currentEvent = window.localStorage.getItem('currentEventObject') - if (currentEvent === null || currentEvent === '[]' || currentEvent === '') { - sharedStatus.currentEventIndex = -1 - } else { - currentEvent = JSON.parse(currentEvent) - sharedStatus.currentEventIndex = response.data.events_Events.findIndex(function (element) { - return element.id == currentEvent.id - }) + const TEAM_BY_OWNER_QUERY = Apollo.gql` + query teamsByOwnerQuery { + teams_TeamsByOwner { + id + name + slug + profile { + avatar + banner + description + motto + updatedAt + } + members { + member { + alias + } + } + fb { + id + name + slug + avatar + kind + status { + status + reason + createdAt + } + } + } } - resolve({ currentEvents: response.data.events_Events}) - }) - .catch(error => { - console.log('apolloClient error getting current events', error) - reject(error) - }) - }) - } + ` - /* Getting all Clones */ - - const networkInterfaceClones = Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl - }) - - networkInterfaceClones.use([{ - applyMiddleware (req, next) { - req.options.headers = { - authorization: `Bearer ${accessToken}` - } - next() + const getTeamByOwner = () => { + return new Promise((resolve, reject) => { + apolloClientTeams.query({ + query: TEAM_BY_OWNER_QUERY + }) + .then(response => { + window.localStorage.setItem('userTeams', JSON.stringify(response.data.teams_TeamsByOwner)) + resolve({ teams: response.data.teams_TeamsByOwner}) + }) + .catch(error => { + console.log('apolloClient error getting user teams', error) + reject(error) + }) + }) } - }]) - const apolloClientClones = new Apollo.lib.ApolloClient({ - networkInterface: networkInterfaceClones, - connectToDevTools: true - }) + /* Gettings All Events */ - const CLONES_QUERY = Apollo.gql` - query Operations_Clones{ - operations_Clones { + const networkInterfaceEvents = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + const apolloClientEvents = new Apollo.lib.ApolloClient({ + networkInterface: networkInterfaceEvents, + connectToDevTools: true, + addTypename: false + }) + + const EVENTS_QUERY = Apollo.gql` + query events($maxStartDate: Int, $minEndDate: Int){ + events_Events(maxStartDate: $maxStartDate, minEndDate: $minEndDate){ id - authId - teamId - botId - mode - resumeExecution - beginDatetime + title + startDatetime endDatetime - waitTime - state - stateDatetime - createDatetime - lastLogs - runAsTeam - summaryDate - buyAverage - sellAverage - marketRate - combinedProfitsA - combinedProfitsB - assetA - assetB - botType - teamName - botName - botAvatar - teamAvatar - processName - keyId - botSlug + participants{ + clone{ + id + team{ + slug + } + bot{ + slug + } + } } - } - ` - - const getClones = () => { - return new Promise((resolve, reject) => { - apolloClientClones.query({ - query: CLONES_QUERY - }) - .then(response => { - window.localStorage.setItem('userClones', JSON.stringify(response.data.operations_Clones)) - let clones = response.data.operations_Clones - for (let i = 0; i < clones.length; i++) { - let clone = clones[i] - if (clone.botType === 'Trading') { - let teamSlug = clone.teamName.toLowerCase() - teamSlug = teamSlug.replace(' ', '-') - let devTeam = ecosystem.getTeam(teamSlug) - let bot = ecosystem.getBot(devTeam, clone.botSlug) - if (bot !== undefined) { - bot.cloneId = clone.id - } - } } + } + ` - resolve({ clones: response.data.operations_Clones}) - }) - .catch(error => { - console.log('apolloClient error getting user clones', error) - reject(error) - }) - }) - } - - // To avoid race conditions, add asynchronous fetches to array - let fetchDataPromises = [] - - fetchDataPromises.push(getUser(), getTeamByOwner(), getCurrentEvents(), getClones(), authenticateUser()) - - // When all asynchronous fetches resolve, authenticate user or throw error. - await Promise.all(fetchDataPromises).then(result => { - - }, err => { - console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err) - }) - - thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) - - async function authenticateUser () { - if (sessionToken === undefined) { sessionToken = '' } - - let path = window.canvasApp.urlPrefix + 'AABrowserAPI/authenticateUser/' + sessionToken - - return new Promise( - function (resolve, reject) { - callServer(undefined, path, (result) => { - let responseFromServer = JSON.parse(result) - - err = responseFromServer.err - - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - console.log('Please make sure you create a new team!') - reject(err) - } - - window.USER_PROFILE = responseFromServer.userProfile - window.localStorage.setItem('sessionToken', sessionToken) - - currentLabel = 'Logged In' - resolve() + const getCurrentEvents = () => { + var d = new Date() + var nowSeconds = Math.round(d.getTime() / 1000) + var twoWeeksAgoSeconds = nowSeconds - 1209600 + return new Promise((resolve, reject) => { + apolloClientEvents.query({ + query: EVENTS_QUERY, + variables: { maxStartDate: nowSeconds, minEndDate: twoWeeksAgoSeconds } + }) + .then(response => { + window.localStorage.setItem('currentEvents', JSON.stringify(response.data.events_Events)) + currentEvent = window.localStorage.getItem('currentEventObject') + if (currentEvent === null || currentEvent === '[]' || currentEvent === '') { + sharedStatus.currentEventIndex = -1 + } else { + currentEvent = JSON.parse(currentEvent) + sharedStatus.currentEventIndex = response.data.events_Events.findIndex(function (element) { + return element.id == currentEvent.id }) } - ) + resolve({ currentEvents: response.data.events_Events}) + }) + .catch(error => { + console.log('apolloClient error getting current events', error) + reject(error) + }) + }) + } + + /* Getting all Clones */ + + const networkInterfaceClones = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + networkInterfaceClones.use([{ + applyMiddleware (req, next) { + req.options.headers = { + authorization: `Bearer ${accessToken}` + } + next() + } + }]) + + const apolloClientClones = new Apollo.lib.ApolloClient({ + networkInterface: networkInterfaceClones, + connectToDevTools: true + }) + + const CLONES_QUERY = Apollo.gql` + query Operations_Clones{ + operations_Clones { + id + authId + teamId + botId + mode + resumeExecution + beginDatetime + endDatetime + waitTime + state + stateDatetime + createDatetime + lastLogs + runAsTeam + summaryDate + buyAverage + sellAverage + marketRate + combinedProfitsA + combinedProfitsB + assetA + assetB + botType + teamName + botName + botAvatar + teamAvatar + processName + keyId + botSlug + } + } + ` + + const getClones = () => { + return new Promise((resolve, reject) => { + apolloClientClones.query({ + query: CLONES_QUERY + }) + .then(response => { + window.localStorage.setItem('userClones', JSON.stringify(response.data.operations_Clones)) + let clones = response.data.operations_Clones + for (let i = 0; i < clones.length; i++) { + let clone = clones[i] + if (clone.botType === 'Trading') { + let teamSlug = clone.teamName.toLowerCase() + teamSlug = teamSlug.replace(' ', '-') + let devTeam = ecosystem.getTeam(teamSlug) + let bot = ecosystem.getBot(devTeam, clone.botSlug) + if (bot !== undefined) { + bot.cloneId = clone.id + } + } + } + + resolve({ clones: response.data.operations_Clones}) + }) + .catch(error => { + console.log('apolloClient error getting user clones', error) + reject(error) + }) + }) + } + + // To avoid race conditions, add asynchronous fetches to array + let fetchDataPromises = [] + + fetchDataPromises.push(getUser(), getTeamByOwner(), getCurrentEvents(), getClones(), authenticateUser()) + + // When all asynchronous fetches resolve, authenticate user or throw error. + await Promise.all(fetchDataPromises).then(result => { + + }, err => { + console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err) + }) + + thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) + + async function authenticateUser () { + if (sessionToken === undefined) { sessionToken = '' } + + let path = window.canvasApp.urlPrefix + 'AABrowserAPI/authenticateUser/' + sessionToken + + return new Promise( + function (resolve, reject) { + callServer(undefined, path, (result) => { + let responseFromServer = JSON.parse(result) + + err = responseFromServer.err + + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + console.log('Please make sure you create a new team!') + reject(err) + } + + window.USER_PROFILE = responseFromServer.userProfile + window.localStorage.setItem('sessionToken', sessionToken) + + currentLabel = 'Logged In' + resolve() + }) + } + ) + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } } } diff --git a/Utilities.js b/Utilities.js index ecf946f0b..d6083eda9 100644 --- a/Utilities.js +++ b/Utilities.js @@ -75,7 +75,7 @@ function saveUserPosition (container, timeLineCoordinateSystem) { window.localStorage.setItem('userPosition', JSON.stringify(userPosition)) } -function moveToUserPosition (container, timeLineCoordinateSystem) { +function getUserPosition () { let savedPosition = window.localStorage.getItem('userPosition') let userPosition @@ -90,11 +90,17 @@ function moveToUserPosition (container, timeLineCoordinateSystem) { userPosition = JSON.parse(savedPosition) } - let centerPoint = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + userPosition.point = { + x: (new Date(userPosition.date)).valueOf(), + y: userPosition.rate } + return userPosition +} + +function moveToUserPosition (container, timeLineCoordinateSystem) { + let userPosition = getUserPosition() + viewPort.newZoomLevel(userPosition.zoom) INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom) INITIAL_DATE = new Date(userPosition.date) @@ -104,11 +110,16 @@ function moveToUserPosition (container, timeLineCoordinateSystem) { y: userPosition.rate } - /* Put this point in the coordinate system of the viewPort */ + /* Put this po int in the coordinate system of the viewPort */ targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint) targetPoint = transformThisPoint(targetPoint, container) + let centerPoint = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + } + /* Lets calculate the displace vector, from the point we want at the center, to the current center. */ let displaceVector = { From ce98e155e3d9572c9fdd818bc49cd61f5bbb197e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 02:09:49 +0200 Subject: [PATCH 12/26] Scaling on X working --- BottomSpace/ChartAspectRatio.js | 2 +- Canvas.js | 6 +++--- Container.js | 5 +++++ Dashboard.js | 2 +- Globals.js | 1 + Scales/RightScale.js | 2 +- Scales/TimeScale.js | 11 +++++++++-- TimelineChart.js | 16 +++++++++------- Utilities.js | 23 ++++++++++++++--------- ViewPort.js | 1 - 10 files changed, 44 insertions(+), 25 deletions(-) diff --git a/BottomSpace/ChartAspectRatio.js b/BottomSpace/ChartAspectRatio.js index e32b17292..599fb97d2 100644 --- a/BottomSpace/ChartAspectRatio.js +++ b/BottomSpace/ChartAspectRatio.js @@ -17,7 +17,7 @@ container.isDraggeable = false container.isClickeable = false - container.isWheeleable = true + container.isWheelable = true thisObject.aspectRatio = {} diff --git a/Canvas.js b/Canvas.js index aff397357..05980a0d0 100644 --- a/Canvas.js +++ b/Canvas.js @@ -548,7 +548,7 @@ function newCanvas () { container = thisObject.chartSpace.getContainer(point) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined) { container.eventHandler.raiseEvent('onMouseOver', point) return } @@ -594,7 +594,7 @@ function newCanvas () { let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) - if (bottomContainer !== undefined && bottomContainer.isWheeleable === true) { + if (bottomContainer !== undefined && bottomContainer.isWheelable === true) { bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -603,7 +603,7 @@ function newCanvas () { let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }) - if (chartContainer !== undefined && chartContainer.isWheeleable === true) { + if (chartContainer !== undefined && chartContainer.isWheelable === true) { chartContainer.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } else { diff --git a/Container.js b/Container.js index 7cdae58ad..19d327dc8 100644 --- a/Container.js +++ b/Container.js @@ -43,6 +43,7 @@ function newContainer () { thisObject.frame.parentFrame = parentContainer.frame thisObject.parentContainer = parentContainer thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -67,4 +68,8 @@ function newContainer () { thisObject.eventHandler.raiseEvent('Dimmensions Changed', event) } } + + function onMouseOver (event) { + thisObject.eventHandler.raiseEvent('onMouseOver', event) + } } diff --git a/Dashboard.js b/Dashboard.js index 426e7fbad..1adcdea84 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -3,7 +3,7 @@ let canvas let markets let ecosystem = newEcosystem() let INITIAL_ZOOM_LEVEL = -26 // This is the zoom level at the view port in which the APP starts. -let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL) // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. +let INITIAL_TIME_PERIOD = recalculatePeriod(MIN_ZOOM_LEVEL) // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. let viewPort = newViewPort() function newDashboard () { diff --git a/Globals.js b/Globals.js index b755b7437..cc24a3bcb 100644 --- a/Globals.js +++ b/Globals.js @@ -36,6 +36,7 @@ UI_FONT = { }; FONT_ASPECT_RATIO = 0.45; +const MIN_ZOOM_LEVEL = -28.25 /* User Interface Panels */ diff --git a/Scales/RightScale.js b/Scales/RightScale.js index fc6a7ae3d..ec5e4f7cb 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -20,7 +20,7 @@ container.isDraggeable = false container.isClickeable = false - container.isWheeleable = true + container.isWheelable = true return thisObject diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 6c2a54884..cbe523a25 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -1,4 +1,11 @@ function newTimeScale () { + const MODULE_NAME = 'Time 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, @@ -10,7 +17,7 @@ function newTimeScale () { const RIGHT_MARGIN = 50 let container = newContainer() - container.initialize() + container.initialize(MODULE_NAME) thisObject.container = container thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x @@ -21,7 +28,7 @@ function newTimeScale () { container.isDraggeable = false container.isClickeable = false - container.isWheeleable = true + container.isWheelable = true return thisObject diff --git a/TimelineChart.js b/TimelineChart.js index 2344799d4..1ce510759 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -63,12 +63,14 @@ try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', onContainerDimmensionsChanged) - - function onContainerDimmensionsChanged (event) { + thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem) - } + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true) + }) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + }) /* We load the logow we will need for the background. */ exchange = pExchange @@ -185,7 +187,7 @@ recalculateCurrentDatetime() - saveUserPosition(thisObject.container, timeLineCoordinateSystem) + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) } } @@ -208,7 +210,7 @@ if (initializationReady === true) { if (thisObject.container.frame.isInViewPort()) { recalculateCurrentDatetime() - saveUserPosition(thisObject.container, timeLineCoordinateSystem) + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) } } } diff --git a/Utilities.js b/Utilities.js index d6083eda9..07d99606e 100644 --- a/Utilities.js +++ b/Utilities.js @@ -59,15 +59,17 @@ function getMilisecondsFromPoint (point, container, timeLineCoordinateSystem) { return point.x } -function saveUserPosition (container, timeLineCoordinateSystem) { - let centerPoint = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 +function saveUserPosition (container, timeLineCoordinateSystem, position) { + if (position === undefined) { + position = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + } } let userPosition = { - date: getDateFromPoint(centerPoint, container, timeLineCoordinateSystem), - rate: getRateFromPoint(centerPoint, container, timeLineCoordinateSystem), + date: getDateFromPoint(position, container, timeLineCoordinateSystem), + rate: getRateFromPoint(position, container, timeLineCoordinateSystem), market: DEFAULT_MARKET, zoom: viewPort.zoomTargetLevel } @@ -75,7 +77,7 @@ function saveUserPosition (container, timeLineCoordinateSystem) { window.localStorage.setItem('userPosition', JSON.stringify(userPosition)) } -function getUserPosition () { +function getUserPosition (timeLineCoordinateSystem) { let savedPosition = window.localStorage.getItem('userPosition') let userPosition @@ -98,8 +100,8 @@ function getUserPosition () { return userPosition } -function moveToUserPosition (container, timeLineCoordinateSystem) { - let userPosition = getUserPosition() +function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY) { + let userPosition = getUserPosition(timeLineCoordinateSystem) viewPort.newZoomLevel(userPosition.zoom) INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom) @@ -127,6 +129,9 @@ function moveToUserPosition (container, timeLineCoordinateSystem) { y: centerPoint.y - targetPoint.y } + if (ignoreX) { displaceVector.x = 0 } + if (ignoreY) { displaceVector.y = 0 } + viewPort.displace(displaceVector) } diff --git a/ViewPort.js b/ViewPort.js index b61c4deef..e45fc54c8 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -7,7 +7,6 @@ function newViewPort () { const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT const LEFT_MARGIN = 50 const RIGHT_MARGIN = 50 - const MIN_ZOOM_LEVEL = -28.25 let thisObject = { visibleArea: undefined, From 650c40e10ca534e2289e4715a471b3756b6f9cab Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 02:45:24 +0200 Subject: [PATCH 13/26] Next is getCointainers with purpose --- Canvas.js | 8 ++++---- ProductCard.js | 21 ++++++++++----------- TimeMachine.js | 1 + TimelineChart.js | 3 ++- Utilities.js | 16 ++++++++++++---- 5 files changed, 29 insertions(+), 20 deletions(-) diff --git a/Canvas.js b/Canvas.js index 05980a0d0..f4c56f015 100644 --- a/Canvas.js +++ b/Canvas.js @@ -510,7 +510,7 @@ function newCanvas () { container = thisObject.topSpace.getContainer(point) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } @@ -519,7 +519,7 @@ function newCanvas () { container = thisObject.bottomSpace.getContainer(point) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } @@ -528,7 +528,7 @@ function newCanvas () { container = thisObject.panelsSpace.getContainer(point) - if (container !== undefined && container.isClickeable === true) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } @@ -548,7 +548,7 @@ function newCanvas () { container = thisObject.chartSpace.getContainer(point) - if (container !== undefined) { + if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) return } diff --git a/ProductCard.js b/ProductCard.js index ada217471..0dcdbd59c 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -113,12 +113,11 @@ function newProductCard () { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - var container = newContainer() - container.name = 'Product Card ' + thisObject.code - container.initialize() - container.isDraggeable = false - container.isClickeable = true - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME + thisObject.code) + thisObject.container.detectMouseOver = true + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = true /* Add information that will later be needed. */ @@ -136,9 +135,9 @@ function newProductCard () { y: 0 } - this.container.frame.position = position - this.container.frame.width = UI_PANEL.WIDTH.LARGE - 20 - this.container.frame.height = 100 + thisObject.container.frame.position = position + thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE - 20 + thisObject.container.frame.height = 100 /* We retrieve the locally stored status of the Product */ @@ -263,8 +262,8 @@ function newProductCard () { /* First we check if this point is inside this space. */ - if (this.container.frame.isThisPointHere(point, true) === true) { - return this.container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container } else { /* This point does not belong to this space. */ diff --git a/TimeMachine.js b/TimeMachine.js index acc561f79..cefd6e951 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -28,6 +28,7 @@ function newTimeMachine () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) thisObject.container.isDraggeable = false + thisObject.container.detectMouseOver = true thisObject.container.frame.width = TIME_MACHINE_WIDTH thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y diff --git a/TimelineChart.js b/TimelineChart.js index 1ce510759..7d75c178b 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -23,6 +23,7 @@ thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) + thisObject.container.detectMouseOver = true let chartGrid let breakpointsBar @@ -65,7 +66,7 @@ thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition) }) thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { diff --git a/Utilities.js b/Utilities.js index 07d99606e..454d7edc9 100644 --- a/Utilities.js +++ b/Utilities.js @@ -100,7 +100,7 @@ function getUserPosition (timeLineCoordinateSystem) { return userPosition } -function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY) { +function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center) { let userPosition = getUserPosition(timeLineCoordinateSystem) viewPort.newZoomLevel(userPosition.zoom) @@ -117,9 +117,17 @@ function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignor targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint) targetPoint = transformThisPoint(targetPoint, container) - let centerPoint = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + let centerPoint + if (center !== undefined) { + centerPoint = { + x: center.x, + y: center.y + } + } else { + centerPoint = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2 + } } /* Lets calculate the displace vector, from the point we want at the center, to the current center. */ From 12bdd5dd513398070484e5c7d12785f04baa1f62 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 03:08:56 +0200 Subject: [PATCH 14/26] Working good --- Canvas.js | 4 ++-- Container.js | 28 +++++++++++++++++++++++++++- Globals.js | 6 ++++++ Spaces/ChartSpace.js | 14 +++++--------- TimeMachine.js | 21 +++++++++++---------- Utilities.js | 1 + 6 files changed, 52 insertions(+), 22 deletions(-) diff --git a/Canvas.js b/Canvas.js index f4c56f015..8ef7e6bf9 100644 --- a/Canvas.js +++ b/Canvas.js @@ -546,7 +546,7 @@ function newCanvas () { /* 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) + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) if (container !== undefined && container.detectMouseOver === true) { container.eventHandler.raiseEvent('onMouseOver', point) @@ -601,7 +601,7 @@ function newCanvas () { /* Finally we try the Chart Space. */ - let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }) + let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) if (chartContainer !== undefined && chartContainer.isWheelable === true) { chartContainer.eventHandler.raiseEvent('Mouse Wheel', event) diff --git a/Container.js b/Container.js index 19d327dc8..442957f08 100644 --- a/Container.js +++ b/Container.js @@ -10,7 +10,8 @@ function newContainer () { isWheelable: false, name: undefined, initialize: initialize, - connectToParent: connectToParent + connectToParent: connectToParent, + isForThisPurpose: isForThisPurpose } let connectedToParentWidth = false @@ -72,4 +73,29 @@ function newContainer () { function onMouseOver (event) { thisObject.eventHandler.raiseEvent('onMouseOver', event) } + + function isForThisPurpose (purpose) { + if (purpose !== undefined) { + switch (purpose) { + case GET_CONTAINER_PURPOSE.MOUSE_OVER: + if (thisObject.detectMouseOver === true) { + return true + } + break + case GET_CONTAINER_PURPOSE.MOUSE_WHEEL: + if (thisObject.isWheelable === true) { + return true + } + break + case GET_CONTAINER_PURPOSE.MOUSE_CLICK: + if (thisObject.isClickeable === true) { + return true + } + break + default: { return false } + + } + } + return false + } } diff --git a/Globals.js b/Globals.js index cc24a3bcb..61cd669b2 100644 --- a/Globals.js +++ b/Globals.js @@ -38,6 +38,12 @@ UI_FONT = { FONT_ASPECT_RATIO = 0.45; const MIN_ZOOM_LEVEL = -28.25 +const GET_CONTAINER_PURPOSE = { + MOUSE_OVER: 1, + MOUSE_WHEEL: 2, + MOUSE_CLICK: 3 +} + /* User Interface Panels */ UI_PANEL = { diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index fc8cc4010..2486cb0a7 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -104,7 +104,7 @@ function newChartSpace () { } } - function getContainer (point) { + function getContainer (point, purpose) { if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } let container @@ -112,17 +112,13 @@ function newChartSpace () { /* Now we see which is the inner most container that has it */ for (var i = 0; i < this.timeMachines.length; i++) { - container = this.timeMachines[i].getContainer(point) - + container = this.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ - - return container + if (container.isForThisPurpose(purpose)) { + return container + } } } - - /* The point does not belong to any inner container, so we return the current container. */ - return this.container } } diff --git a/TimeMachine.js b/TimeMachine.js index cefd6e951..bfd9c20eb 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -189,23 +189,24 @@ function newTimeMachine () { timeScale.draw() } - function getContainer (point) { - if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } - + function getContainer (point, purpose) { let container - /* Now we see which is the inner most container that has it */ - container = timeScale.getContainer(point) - if (container !== undefined) { return container } + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } for (let i = 0; i < this.charts.length; i++) { container = this.charts[i].getContainer(point) - if (container !== undefined) { return container } + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } } - - /* The point does not belong to any inner container, so we return the current container. */ - return this.container } } diff --git a/Utilities.js b/Utilities.js index 454d7edc9..2ea30bde1 100644 --- a/Utilities.js +++ b/Utilities.js @@ -150,3 +150,4 @@ function removeTime (datetime) { return dateOnly } + From 594e4851d8e1ba65aa469c9528dee87cfd179e13 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 10:37:36 +0200 Subject: [PATCH 15/26] Rigth Scale added --- Scales/ChartGrid.js | 7 +++---- Scales/RightScale.js | 17 +++++++++++++++++ Scales/TimeScale.js | 17 ++++++++--------- TimeMachine.js | 4 ++++ 4 files changed, 32 insertions(+), 13 deletions(-) diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js index cfa0f4304..86aa268ee 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() diff --git a/Scales/RightScale.js b/Scales/RightScale.js index ec5e4f7cb..67d3ac758 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -52,6 +52,23 @@ } function draw () { + drawBackground() + } + 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() } } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index cbe523a25..7afaed0d6 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -16,19 +16,18 @@ function newTimeScale () { const RIGHT_MARGIN = 50 - 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 @@ -55,7 +54,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/TimeMachine.js b/TimeMachine.js index bfd9c20eb..b89e5db04 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -41,6 +41,7 @@ function newTimeMachine () { const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 let timeScale + let rigthScale return thisObject @@ -71,6 +72,9 @@ function newTimeMachine () { timeScale = newTimeScale() timeScale.initialize() + rigthScale = newRigthScale() + rigthScale.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) From 41d2d8db745456b7375890a8b8e68772e2314f16 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 10:47:45 +0200 Subject: [PATCH 16/26] Right Scale Connected --- Scales/RightScale.js | 24 +++++++++++++++--------- TimeMachine.js | 8 ++++++++ TimelineChart.js | 10 +++++----- 3 files changed, 28 insertions(+), 14 deletions(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index 67d3ac758..8b24475fa 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -1,4 +1,11 @@ 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, @@ -8,19 +15,18 @@ const RIGHT_MARGIN = 50 - 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 return thisObject @@ -43,7 +49,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. */ diff --git a/TimeMachine.js b/TimeMachine.js index b89e5db04..8123b0369 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -191,6 +191,7 @@ function newTimeMachine () { } timeScale.draw() + rigthScale.draw() } function getContainer (point, purpose) { @@ -203,6 +204,13 @@ function newTimeMachine () { } } + container = rigthScale.getContainer(point) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + for (let i = 0; i < this.charts.length; i++) { container = this.charts[i].getContainer(point) if (container !== undefined) { diff --git a/TimelineChart.js b/TimelineChart.js index 7d75c178b..5cc49fe9c 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 @@ -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) @@ -251,7 +251,7 @@ let container - container = chartGrid.getContainer(point) + // container = chartGrid.getContainer(point) if (container !== undefined) { return container } @@ -321,7 +321,7 @@ if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() - chartGrid.draw(thisObject.container, timeLineCoordinateSystem) + // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) plotterManager.draw() From 5d49e3bf9c998a169221b9ffe702b28d922bf47f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 11:00:06 +0200 Subject: [PATCH 17/26] Right Scale working --- Scales/RightScale.js | 11 ++++++++--- TimeMachine.js | 9 +++++++-- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index 8b24475fa..8f72ceda2 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -10,7 +10,8 @@ container: undefined, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + heightPercentage: 100 } const RIGHT_MARGIN = 50 @@ -37,10 +38,14 @@ function onMouseWheel (event) { delta = event.wheelDelta if (delta < 0) { - delta = -0.1 + thisObject.heightPercentage = thisObject.heightPercentage - 10 + if (thisObject.heightPercentage < 10) { thisObject.heightPercentage = 10 } } else { - delta = 0.1 + thisObject.heightPercentage = thisObject.heightPercentage + 10 + if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } } + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) } function getContainer (point) { diff --git a/TimeMachine.js b/TimeMachine.js index 8123b0369..1d6a040ec 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -72,11 +72,16 @@ function newTimeMachine () { 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) + }) + rigthScale = newRigthScale() rigthScale.initialize() - timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { - thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 + 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) }) From 594f9cc70ca7319de134fbf3d273774f8b3e61ca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 11:15:40 +0200 Subject: [PATCH 18/26] STEP_SIZE --- Scales/RightScale.js | 7 ++++--- Scales/TimeScale.js | 7 ++++--- TimelineChart.js | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index 8f72ceda2..08277c02a 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -15,6 +15,7 @@ } const RIGHT_MARGIN = 50 + const STEP_SIZE = 5 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) @@ -38,10 +39,10 @@ function onMouseWheel (event) { delta = event.wheelDelta if (delta < 0) { - thisObject.heightPercentage = thisObject.heightPercentage - 10 - if (thisObject.heightPercentage < 10) { thisObject.heightPercentage = 10 } + thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE + if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE } } else { - thisObject.heightPercentage = thisObject.heightPercentage + 10 + thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } } event.heightPercentage = thisObject.heightPercentage diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 7afaed0d6..b52ab8c10 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -15,6 +15,7 @@ function newTimeScale () { } const RIGHT_MARGIN = 50 + const STEP_SIZE = 5 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) @@ -38,10 +39,10 @@ function newTimeScale () { 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 diff --git a/TimelineChart.js b/TimelineChart.js index 5cc49fe9c..de2ed5f5f 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -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) { From 7f8b9b07415d986da2620c818b63a6d85e1fa2f6 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 11:43:17 +0200 Subject: [PATCH 19/26] TimeScale persisted to local storage --- Scales/TimeScale.js | 12 ++++++++- TimeMachine.js | 66 +++++++++++++++++++++++---------------------- 2 files changed, 45 insertions(+), 33 deletions(-) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index b52ab8c10..0e2e62417 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -11,9 +11,10 @@ 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 @@ -34,6 +35,12 @@ function newTimeScale () { 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 } + + event.lenghtPercentage = thisObject.lenghtPercentage + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) } function onMouseWheel (event) { @@ -45,8 +52,11 @@ function newTimeScale () { 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) { diff --git a/TimeMachine.js b/TimeMachine.js index 1d6a040ec..1dcbaf300 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -67,24 +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) - }) - - rigthScale = newRigthScale() - rigthScale.initialize() - - 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) - }) - /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ let position = 0 // This defines the position of each chart respect to each other. @@ -103,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 } @@ -117,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() } @@ -195,24 +193,28 @@ function newTimeMachine () { chart.draw() } - timeScale.draw() - rigthScale.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 + } } } - container = rigthScale.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 + } } } From f0b8c8dbc6b021ef76d2677a16263cf7c778505c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 11:56:23 +0200 Subject: [PATCH 20/26] Rigth Scale saving state to storage --- Scales/RightScale.js | 13 +++++++++++++ Scales/TimeScale.js | 6 +++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index 08277c02a..de5e716b5 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -14,6 +14,7 @@ heightPercentage: 100 } + const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 const RIGHT_MARGIN = 50 const STEP_SIZE = 5 @@ -34,6 +35,16 @@ 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) } function onMouseWheel (event) { @@ -47,6 +58,8 @@ } event.heightPercentage = thisObject.heightPercentage thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) } function getContainer (point) { diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 0e2e62417..be3cc9232 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -37,7 +37,11 @@ function newTimeScale () { thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) - if (!thisObject.lenghtPercentage) { thisObject.lenghtPercentage = LENGHT_PERCENTAGE_DEFAULT_VALUE } + 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) From b3d17813df723caca765714d689ca8fe24a8b6e5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 12:12:41 +0200 Subject: [PATCH 21/26] Chart Aspect Ratio Button and functionality eliminated --- BottomSpace/ChartAspectRatio.js | 115 -------------------------------- PlottersManager.js | 30 --------- Scales/ChartGrid.js | 2 +- Spaces/BottomSpace.js | 10 --- Spaces/ChartSpace.js | 6 -- TimeMachine.js | 2 +- TimelineChart.js | 7 -- 7 files changed, 2 insertions(+), 170 deletions(-) delete mode 100644 BottomSpace/ChartAspectRatio.js 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/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 86aa268ee..3ceb3bd35 100644 --- a/Scales/ChartGrid.js +++ b/Scales/ChartGrid.js @@ -55,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/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 1dcbaf300..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 diff --git a/TimelineChart.js b/TimelineChart.js index de2ed5f5f..da21b21be 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -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) From 6f93a6918dc08efb1bc4809bb8b5a0eae86ef255 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 13:32:57 +0200 Subject: [PATCH 22/26] Allowinf anonymous functions as event handlers --- EventHandler.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) 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 + } } } } From 68e8c96c85f6ee14678749cbc93a30c0d3b0d8d3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 17:18:35 +0200 Subject: [PATCH 23/26] Removing LRC --- Panels/ProductsPanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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++) { From 44fce4fbc57e8aba6999c2595e3c1c9d9bfcd635 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 21:23:25 +0200 Subject: [PATCH 24/26] MouseOver event into Right Scale working --- Scales/RightScale.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ TimeMachine.js | 4 ++-- 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index de5e716b5..bd7ecc144 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -31,6 +31,13 @@ thisObject.container.isClickeable = false thisObject.container.isWheelable = true + let mouse = { + position: { + x: 0, + y: 0 + } + } + return thisObject function initialize () { @@ -45,6 +52,11 @@ 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) { @@ -78,6 +90,7 @@ function draw () { drawBackground() + drawLabel() } function drawBackground () { @@ -96,4 +109,35 @@ 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/TimeMachine.js b/TimeMachine.js index 75e11f84a..930f6177f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -98,7 +98,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - + timeScale.container.connectToParent(thisObject.container, false, false) timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -107,7 +107,7 @@ function newTimeMachine () { timeScale.initialize() rigthScale = newRigthScale() - + rigthScale.container.connectToParent(thisObject.container, false, false) 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) From 116c050b62de88d488ea490ff2fa7857d55a9ee9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 21:31:58 +0200 Subject: [PATCH 25/26] Reverted this --- TimeMachine.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/TimeMachine.js b/TimeMachine.js index 930f6177f..75e11f84a 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -98,7 +98,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false) + timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -107,7 +107,7 @@ function newTimeMachine () { timeScale.initialize() rigthScale = newRigthScale() - rigthScale.container.connectToParent(thisObject.container, false, false) + 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) From 6f51a6dab124f73c7bd534010d4fe36e4ebde577 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 22:26:10 +0200 Subject: [PATCH 26/26] Event Definition --- Scales/RightScale.js | 1 + Scales/TimeScale.js | 1 + 2 files changed, 2 insertions(+) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index bd7ecc144..c88b12ceb 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -50,6 +50,7 @@ thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage) } + let event = {} event.heightPercentage = thisObject.heightPercentage thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index be3cc9232..5e8dba0f1 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -43,6 +43,7 @@ function newTimeScale () { thisObject.lenghtPercentage = JSON.parse(thisObject.lenghtPercentage) } + let event = {} event.lenghtPercentage = thisObject.lenghtPercentage thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) }