diff --git a/ChartsSpace/TimeLineCoordinateSystem.js b/ChartsSpace/CoordinateSystem.js similarity index 98% rename from ChartsSpace/TimeLineCoordinateSystem.js rename to ChartsSpace/CoordinateSystem.js index 2c906b81d..93e261fda 100644 --- a/ChartsSpace/TimeLineCoordinateSystem.js +++ b/ChartsSpace/CoordinateSystem.js @@ -7,7 +7,7 @@ The scale on the Y axis depends on the data that wants to be plotted. Usually we */ -function newTimeLineCoordinateSystem () { +function newCoordinateSystem () { let thisObject = { min: undefined, max: undefined, @@ -126,4 +126,3 @@ function newTimeLineCoordinateSystem () { return point } } - diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 1f21cb7a2..bbbae6a7c 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -31,9 +31,7 @@ function newTimeMachine () { finalize: finalize } - const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 - - let timeLineCoordinateSystem = newTimeLineCoordinateSystem() + let timeMachineCoordinateSystem = newCoordinateSystem() let mouse = { position: { @@ -125,7 +123,7 @@ function newTimeMachine () { function initialize (callBackFunction) { timeFrame = INITIAL_TIME_PERIOD - recalculateScale() + recalculateCoordinateSystem() onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) @@ -171,12 +169,12 @@ function newTimeMachine () { timeScaleEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 - recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition, false, true) + recalculateCoordinateSystem() + moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, false, true, event.mousePosition, false, true) thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - thisObject.timeScale.initialize(timeLineCoordinateSystem, thisObject.container) + thisObject.timeScale.initialize(timeMachineCoordinateSystem, thisObject.container) timeScaleMouseOverEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('onMouseOver', timeScaleMouseOver) @@ -192,12 +190,12 @@ function newTimeMachine () { rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 - recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, true, false, event.mousePosition, false, true) + recalculateCoordinateSystem() + moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, true, false, event.mousePosition, false, true) thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - thisObject.rateScale.initialize(timeLineCoordinateSystem, thisObject.container) + thisObject.rateScale.initialize(timeMachineCoordinateSystem, thisObject.container) rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOver', rateScaleMouseOver) @@ -225,7 +223,7 @@ function newTimeMachine () { } }) - thisObject.timeFrameScale.initialize(timeLineCoordinateSystem, thisObject.container) + thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container) timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOver', timeFrameScaleMouseOver) @@ -292,6 +290,12 @@ function newTimeMachine () { } function syncWithDesignerScales () { + if (thisObject.payload.node === undefined) { + finalizeTimeScale() + finalizeRateScale() + finalizeTimeFrameScale() + return + } if (thisObject.payload.node.timeScale === undefined && thisObject.timeScale !== undefined) { finalizeTimeScale() } @@ -355,7 +359,7 @@ function newTimeMachine () { 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 = 0 - timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeLineCoordinateSystem, onTimelineChartInitialized) + timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeMachineCoordinateSystem, onTimelineChartInitialized) /* we will store the event suscription id as a property of the timelineChart, to avoid keeping it an a separate array */ timelineChart.onChildrenMouseOverEventSuscriptionId = timelineChart.container.eventHandler.listenToEvent('onChildrenMouseOver', onChildrenMouseOver) @@ -384,7 +388,7 @@ function newTimeMachine () { y: 0 } - let cornerDate = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + let cornerDate = getDateFromPoint(point, thisObject.container, timeMachineCoordinateSystem) cornerDate = new Date(cornerDate) window.localStorage.setItem('Date @ Screen Corner', cornerDate.toUTCString()) } @@ -430,7 +434,7 @@ function newTimeMachine () { } } - function recalculateScale () { + function recalculateCoordinateSystem () { let minValue = { x: MIN_PLOTABLE_DATE.valueOf(), y: 0 @@ -441,7 +445,7 @@ function newTimeMachine () { y: nextPorwerOf10(USDT_BTC_HTH) / 4 } - timeLineCoordinateSystem.initialize( + timeMachineCoordinateSystem.initialize( minValue, maxValue, thisObject.container.frame.width, diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index ad84e6998..76f6e3ecb 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -6,14 +6,13 @@ function newTimelineChart () { const logger = newWebDebugLog() logger.fileName = MODULE_NAME - let timeLineCoordinateSystem - let timeFrame = INITIAL_TIME_PERIOD let datetime = NEW_SESSION_INITIAL_DATE let thisObject = { container: undefined, fitFunction: undefined, + rateScale: undefined, timeFrameScale: undefined, payload: undefined, plotterManager: undefined, @@ -28,6 +27,9 @@ function newTimelineChart () { thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea + let timeMachineCoordinateSystem + let timelineChartCoordinateSystem = newCoordinateSystem() + let initializationReady = false let productsPanel @@ -61,6 +63,10 @@ function newTimelineChart () { } function finalize () { + if (thisObject.rateScale !== undefined) { + finalizeRateScale() + } + if (thisObject.timeFrameScale !== undefined) { finalizeTimeFrameScale() } @@ -93,19 +99,29 @@ function newTimelineChart () { } } - function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { + function finalizeRateScale () { + thisObject.rateScale.container.eventHandler.stopListening(rateScaleEventSuscriptionId) + thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId) + thisObject.rateScale.finalize() + thisObject.rateScale = undefined + + /* Resets the local container with the dimessions of its parent, the Time Machine */ + thisObject.container.frame.position.position.y = 0 + thisObject.container.frame.position.height = thisObject.container.parentContainer.frame.height + } + + function initialize (pExchange, pMarket, pTimeMachineCoordinateSystem, callBackFunction) { try { /* We load the logow we will need for the background. */ exchange = pExchange market = pMarket - timeLineCoordinateSystem = pTimeLineCoordinateSystem + timeMachineCoordinateSystem = pTimeMachineCoordinateSystem let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner) productsPanel.initialize(exchange, market) - // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) timeFrame = INITIAL_TIME_PERIOD datetime = NEW_SESSION_INITIAL_DATE @@ -137,6 +153,11 @@ function newTimelineChart () { function onMouseOver (event) { /* This event gets to the timelinechart container because it inherits it from the time machine container, which is the one raising Mouse Over and Mouse not Over Events to its children. */ + if (thisObject.rateScale !== undefined) { + thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event) + thisObject.rateScale.visible = true + } + if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.visible = true thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event) @@ -145,13 +166,16 @@ function newTimelineChart () { mouse.position.x = event.x mouse.position.y = event.y - saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + saveUserPosition(thisObject.container, timeMachineCoordinateSystem, event) } onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) function onMouseNotOver (event) { /* This event is inherited from the Time Machine */ + if (thisObject.rateScale !== undefined) { + thisObject.rateScale.visible = false + } if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.visible = false } @@ -167,6 +191,27 @@ function newTimelineChart () { } } + function initializeRateScale () { + thisObject.rateScale = newRateScale() + thisObject.rateScale.fitFunction = thisObject.fitFunction + thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload + + rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 + recalculateCoordinateSystem() + moveToUserPosition(thisObject.container, timelineChartCoordinateSystem, true, false, event.mousePosition, false, true) + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + }) + + thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container) + + rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOver', rateScaleMouseOver) + + function rateScaleMouseOver (event) { + thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event) + } + } + function initializeTimeFrameScale () { thisObject.timeFrameScale = newTimeFrameScale() thisObject.timeFrameScale.fitFunction = thisObject.fitFunction @@ -180,14 +225,14 @@ function newTimelineChart () { } }) - thisObject.timeFrameScale.initialize(timeLineCoordinateSystem, thisObject.container) + thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container) timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOver', timeFrameScaleMouseOver) function timeFrameScaleMouseOver (event) { thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event) - saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + saveUserPosition(thisObject.container, timeMachineCoordinateSystem, event) } } @@ -195,7 +240,7 @@ function newTimelineChart () { if (initializationReady === true) { recalculateCurrentDatetime() - // saveUserPosition(thisObject.container, timeLineCoordinateSystem) + // saveUserPosition(thisObject.container, timeMachineCoordinateSystem) } } @@ -203,7 +248,7 @@ function newTimelineChart () { if (initializationReady === true) { if (thisObject.container.frame.isInViewPort()) { recalculateCurrentDatetime() - // saveUserPosition(thisObject.container, timeLineCoordinateSystem) + // saveUserPosition(thisObject.container, timeMachineCoordinateSystem) } } } @@ -222,7 +267,11 @@ function newTimelineChart () { } center = unTransformThisPoint(center, thisObject.container) - center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) + if (thisObject.rateScale === undefined) { + center = timeMachineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) + } else { + center = timelineChartCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) + } let newDate = new Date(0) newDate.setUTCSeconds(center.x / 1000) @@ -235,6 +284,15 @@ function newTimelineChart () { function getContainer (point, purpose) { let container + if (thisObject.rateScale !== undefined) { + container = thisObject.rateScale.getContainer(point) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + } + if (thisObject.timeFrameScale !== undefined) { container = thisObject.timeFrameScale.getContainer(point) if (container !== undefined) { @@ -258,6 +316,17 @@ function newTimelineChart () { } function syncWithDesignerScales () { + if (thisObject.payload.node === undefined) { + finalizeRateScale() + finalizeTimeFrameScale() + return + } + if (thisObject.payload.node.rateScale === undefined && thisObject.rateScale !== undefined) { + finalizeRateScale() + } + if (thisObject.payload.node.rateScale !== undefined && thisObject.rateScale === undefined) { + initializeRateScale() + } if (thisObject.payload.node.timeFrameScale === undefined && thisObject.timeFrameScale !== undefined) { finalizeTimeFrameScale() } @@ -267,6 +336,9 @@ function newTimelineChart () { } function childrenPhysics () { + if (thisObject.rateScale !== undefined) { + thisObject.rateScale.physics() + } if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.physics() } @@ -300,9 +372,8 @@ function newTimelineChart () { function draw () { if (thisObject.container.frame.isInViewPort()) { - if (thisObject.timeFrameScale !== undefined) { - thisObject.timeFrameScale.draw() - } + if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } + if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.draw() } } } @@ -336,4 +407,23 @@ function newTimelineChart () { browserCanvasContext.fill() } + + function recalculateCoordinateSystem () { + let minValue = { + x: MIN_PLOTABLE_DATE.valueOf(), + y: 0 + } + + let maxValue = { + x: MAX_PLOTABLE_DATE.valueOf(), + y: nextPorwerOf10(USDT_BTC_HTH) / 4 + } + + timelineChartCoordinateSystem.initialize( + minValue, + maxValue, + thisObject.container.frame.width, + thisObject.container.frame.height + ) + } } diff --git a/Plotter.js b/Plotter.js index 52d0110d4..986d26bc9 100644 --- a/Plotter.js +++ b/Plotter.js @@ -31,7 +31,7 @@ function newPlotter () { container.initialize() thisObject.container = container - let timeLineCoordinateSystem = newTimeLineCoordinateSystem() // Needed to be able to plot on the timeline. + let coordinateSystem = newCoordinateSystem() // Needed to be able to plot on the timeline. let slotCoordinateSystem // Needed to be able to plot on a slot over the timeline. let plotterModuleConfig let slotHeight = (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 10 // This is the amount of slots available @@ -84,7 +84,7 @@ function newPlotter () { marketFile = undefined fileCursor = undefined - timeLineCoordinateSystem = undefined + coordinateSystem = undefined slotCoordinateSystem = undefined plotterModuleConfig = undefined slotHeight = undefined @@ -353,8 +353,8 @@ function newPlotter () { let daysOnSides = getSideDays(timeFrame) - let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem) - let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, timeLineCoordinateSystem) + let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, coordinateSystem) + let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, coordinateSystem) let dateDiff = rightDate.valueOf() - leftDate.valueOf() @@ -406,8 +406,8 @@ function newPlotter () { let daysOnSides = getSideDays(timeFrame) - let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem) - let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, timeLineCoordinateSystem) + let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, coordinateSystem) + let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, coordinateSystem) let dateDiff = rightDate.valueOf() - leftDate.valueOf() @@ -441,7 +441,7 @@ function newPlotter () { function recalculateScale () { try { - if (timeLineCoordinateSystem.maxValue > 0) { return } // Already calculated. + if (coordinateSystem.maxValue > 0) { return } // Already calculated. /* First we calculate the default scale */ let minValue = { x: MIN_PLOTABLE_DATE.valueOf(), @@ -453,7 +453,7 @@ function newPlotter () { y: nextPorwerOf10(USDT_BTC_HTH) / 4 // TODO: This 4 is temporary } - timeLineCoordinateSystem.initialize( + coordinateSystem.initialize( minValue, maxValue, thisObject.container.frame.width, @@ -465,7 +465,7 @@ function newPlotter () { plotterModuleConfig = productDefinition.referenceParent.code if (plotterModuleConfig.slot === undefined) { return } - slotCoordinateSystem = newTimeLineCoordinateSystem() + slotCoordinateSystem = newCoordinateSystem() minValue.y = plotterModuleConfig.slot.minValue maxValue.y = plotterModuleConfig.slot.maxValue @@ -511,8 +511,8 @@ function newPlotter () { y: 0 } - beginPoint = timeLineCoordinateSystem.transformThisPoint(beginPoint) - endPoint = timeLineCoordinateSystem.transformThisPoint(endPoint) + beginPoint = coordinateSystem.transformThisPoint(beginPoint) + endPoint = coordinateSystem.transformThisPoint(endPoint) beginPoint = transformThisPoint(beginPoint, thisObject.container) endPoint = transformThisPoint(endPoint, thisObject.container) @@ -565,7 +565,7 @@ function newPlotter () { The information we store in files is independent from the charing system and its coordinate systems. That means that the first thing we allways need to do is to trasform these points to the coordinate system of the timeline. */ - dataPoint = timeLineCoordinateSystem.transformThisPoint(dataPoint) + dataPoint = coordinateSystem.transformThisPoint(dataPoint) /* The browser canvas object does not care about our timeline and its coordinate system. In order to draw on a html canvas we diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 527bfac82..ddab988fa 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -144,6 +144,24 @@ function newRateScale () { upCorner = limitingContainer.fitFunction(upCorner, true) bottonCorner = limitingContainer.fitFunction(bottonCorner, true) + /* We will check if we need to change the bottom because of being one of many scales of the same type */ + let displaceFactor = 0 + if (thisObject.payload.parentNode === undefined) { return } // This happens when in the process of deleting the scale, timeline chart or time machine. + if (thisObject.payload.parentNode.type === 'Timeline Chart') { + if (thisObject.payload.parentNode.payload.parentNode.rateScale !== undefined) { + displaceFactor++ + } + for (let i = 0; i < thisObject.payload.parentNode.payload.parentNode.timelineCharts.length; i++) { + let timelineChart = thisObject.payload.parentNode.payload.parentNode.timelineCharts[i] + if (thisObject.payload.node.id !== timelineChart.rateScale.id) { + displaceFactor++ + } else { + break + } + } + } + bottonCorner.x = bottonCorner.x - thisObject.container.frame.width * displaceFactor + /* Mouse Position Rate Calculation */ let ratePoint = { x: 0, diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js index 28aa573e6..b9a9c2937 100644 --- a/Scales/TimeFrameScale.js +++ b/Scales/TimeFrameScale.js @@ -112,22 +112,22 @@ function newTimeFrameScale () { bottonCorner = limitingContainer.fitFunction(bottonCorner, true) /* We will check if we need to change the bottom because of being one of many scales of the same type */ - let levelsUp = 0 + let displaceFactor = 0 if (thisObject.payload.parentNode === undefined) { return } // This happens when in the process of deleting the scale, timeline chart or time machine. if (thisObject.payload.parentNode.type === 'Timeline Chart') { if (thisObject.payload.parentNode.payload.parentNode.timeFrameScale !== undefined) { - levelsUp++ + displaceFactor++ } for (let i = 0; i < thisObject.payload.parentNode.payload.parentNode.timelineCharts.length; i++) { let timelineChart = thisObject.payload.parentNode.payload.parentNode.timelineCharts[i] if (thisObject.payload.node.id !== timelineChart.timeFrameScale.id) { - levelsUp++ + displaceFactor++ } else { break } } } - bottonCorner.y = bottonCorner.y - thisObject.container.frame.height * levelsUp + bottonCorner.y = bottonCorner.y - thisObject.container.frame.height * displaceFactor /* Positioning */ timePoint = {