From ce98e155e3d9572c9fdd818bc49cd61f5bbb197e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 11 Apr 2019 02:09:49 +0200 Subject: [PATCH] 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,