From a6e22aaf9ccc4ee7e1188b36225f42a317a832fd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 20:58:16 +0200 Subject: [PATCH] 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() } } -