diff --git a/Canvas.js b/Canvas.js index 1e9e3091a..41d071313 100644 --- a/Canvas.js +++ b/Canvas.js @@ -171,14 +171,15 @@ function newCanvas () { animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) - animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) + animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) animation.start(onStart) function onFunctionAdded (err) { @@ -358,6 +359,21 @@ function newCanvas () { return } + /* we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) + + if (container !== undefined) { + if (container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } else { + viewPortBeingDragged = true + return + } + } + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.isDraggeable === true) { @@ -371,18 +387,6 @@ function newCanvas () { /* We dont want to mess up with the click */ return } - - /* we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - viewPortBeingDragged = true } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } @@ -439,17 +443,17 @@ function newCanvas () { return } - /* We check if the mouse is over a floatingObject/ */ - container = thisObject.floatingSpace.getContainer(point) + /* 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) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) return } - /* 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) + /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -592,9 +596,10 @@ function newCanvas () { } } - /* We check if the mouse is over a floatingObject/ */ - if (thisObject.floatingSpace !== undefined) { - container = thisObject.floatingSpace.getContainer(point) + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + if (thisObject.chartSpace !== undefined) { + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -602,10 +607,9 @@ function newCanvas () { } } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - if (thisObject.chartSpace !== undefined) { - container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) + /* We check if the mouse is over a floatingObject/ */ + if (thisObject.floatingSpace !== undefined) { + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -647,15 +651,6 @@ function newCanvas () { let container container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) - if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('onMouseWheel', event) - return false // This instructs the browser not to take the event and scroll the page. - } - - /* We try second with floating objects. */ - - container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) - if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. @@ -670,9 +665,17 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* Finally we try the Chart Space. */ + /* Chart Space. */ container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('onMouseWheel', event) + return false // This instructs the browser not to take the event and scroll the page. + } + + /* We try second with floating objects. */ + + container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 519aae910..c69e15151 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -57,22 +57,17 @@ function physics () { /* Check the limits */ - if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) { + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT canvas.strategySpace.makeInvisible() - } - if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) { - thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false - } - - if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) { + } else { canvas.strategySpace.makeVisible() } - if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) { - canvas.chartSpace.visible = true + if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) { + thisObject.container.frame.position.y = 0 + canvas.panelsSpace.visible = false + } else { canvas.panelsSpace.visible = true } @@ -188,7 +183,7 @@ browserCanvasContext.beginPath() browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -199,7 +194,7 @@ browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 752188c91..8932c25f3 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -17,6 +17,7 @@ function newChartSpace () { visible: true, container: undefined, fitIntoVisibleArea: fitIntoVisibleArea, + physics: physics, drawBackground: drawBackground, draw: draw, timeMachines: [], @@ -104,6 +105,18 @@ function newChartSpace () { return point } + function physics () { + thisObject.container.frame.height = BOTTOM_SPACE_POSITION + + if (thisObject.container.frame.height <= 0 / 100) { + thisObject.visible = false + } else { + thisObject.visible = true + } + + viewPort.resize() + } + function drawBackground () { if (thisObject.visible !== true) { return } @@ -158,7 +171,12 @@ function newChartSpace () { } } } - return this.container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } } diff --git a/TimeMachine.js b/TimeMachine.js index 3de634771..642ed2387 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -1,4 +1,4 @@ - /* +/* Markets are a function of time. When watching them, end users must be positioned at one particular point in time. The system currently allows users to position themselves at any time they like. @@ -37,7 +37,7 @@ function newTimeMachine () { 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. + // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 let timeScale @@ -63,7 +63,7 @@ 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) @@ -76,7 +76,7 @@ function newTimeMachine () { moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) }) - /* 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. */ + /* 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,7 +103,7 @@ 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. */ + /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) @@ -143,10 +143,10 @@ function newTimeMachine () { let market = SUPPORTED_MARKETS[j] if ( - exchange === DEFAULT_EXCHANGE && - market.assetA === DEFAULT_MARKET.assetA && - market.assetB === DEFAULT_MARKET.assetB - ) { continue } + exchange === DEFAULT_EXCHANGE && + market.assetA === DEFAULT_MARKET.assetA && + market.assetB === DEFAULT_MARKET.assetB + ) { continue } initializeTimelineChart(exchange, market) } @@ -203,7 +203,7 @@ function newTimeMachine () { if (timeScale !== undefined) { timeScale.draw() } if (rigthScale !== undefined) { rigthScale.draw() } - // thisObject.container.frame.draw(false, true, false) + // thisObject.container.frame.draw(false, true, false) } } @@ -237,7 +237,7 @@ function newTimeMachine () { } } - if (thisObject.container.frame.isThisPointHere(point) === true) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { @@ -261,10 +261,11 @@ function newTimeMachine () { } timeLineCoordinateSystem.initialize( - minValue, - maxValue, - thisObject.container.frame.width, - thisObject.container.frame.height - ) + minValue, + maxValue, + thisObject.container.frame.width, + thisObject.container.frame.height + ) } } +