From f9d426de7d693eb743bfcdad85c7e2709f7a068e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 Jan 2020 13:22:14 +0100 Subject: [PATCH] Time Frame Sclae upgraded --- ChartsSpace/TimeMachine.js | 4 +- ChartsSpace/TimelineChart.js | 65 +++++++++--- Scales/Commons.js | 4 +- Scales/RateScale.js | 2 +- Scales/TimeFrameScale.js | 194 ++++------------------------------- 5 files changed, 76 insertions(+), 193 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 14d40fa77..98241006c 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -78,7 +78,8 @@ function newTimeMachine () { thisObject.container.finalize() thisObject.container = undefined - setupContainer() + + mouse = undefined } function initialize (callBackFunction) { @@ -216,6 +217,7 @@ function newTimeMachine () { /* Setting up the new timeline chart. */ timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true) + timelineChart.container.fitFunction = thisObject.container.fitFunction 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 diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index be4e435e7..9ee435e4c 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -14,6 +14,7 @@ function newTimelineChart () { let thisObject = { container: undefined, fitFunction: undefined, + timeFrameScale: undefined, physics: physics, setDatetime: setDatetime, drawBackground: drawBackground, @@ -44,13 +45,20 @@ function newTimelineChart () { let market let productsPanelHandle - let timeFrameScale let onOffsetChangedEventSuscriptionId let onZoomChangedEventSuscriptionId let onMouseOverEventSuscriptionId + let onMouseNotOverEventSuscriptionId let timeFrameScaleEventSuscriptionId + let mouse = { + position: { + x: 0, + y: 0 + } + } + setupContainer() return thisObject @@ -64,17 +72,19 @@ function newTimelineChart () { viewPort.eventHandler.stopListening(onOffsetChangedEventSuscriptionId) viewPort.eventHandler.stopListening(onZoomChangedEventSuscriptionId) thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId) - timeFrameScale.container.eventHandler.stopListening(timeFrameScaleEventSuscriptionId) + thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId) + thisObject.timeFrameScale.container.eventHandler.stopListening(timeFrameScaleEventSuscriptionId) plotterManager.finalize() plotterManager = undefined - timeFrameScale.finalize() - timeFrameScale = undefined + thisObject.timeFrameScale.finalize() + thisObject.timeFrameScale = undefined canvas.panelsSpace.destroyPanel(productsPanelHandle) thisObject.container.finalize() thisObject.container = undefined - setupContainer() + + mouse = undefined } function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { @@ -84,9 +94,22 @@ function newTimelineChart () { market = pMarket timeLineCoordinateSystem = pTimeLineCoordinateSystem - onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + + function onMouseOver (event) { + thisObject.timeFrameScale.visible = true + + mouse.position.x = event.x + mouse.position.y = event.y + saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) - }) + } + + onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + + function onMouseNotOver (event) { + thisObject.timeFrameScale.visible = false + } let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) @@ -157,9 +180,9 @@ function newTimelineChart () { return } - timeFrameScale = newTimeFrameScale() - timeFrameScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - timeFrameScaleEventSuscriptionId = timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) { + thisObject.timeFrameScale = newTimeFrameScale() + thisObject.timeFrameScale.fitFunction = thisObject.fitFunction + timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) { let currentTimeFrame = timeFrame timeFrame = event.timeFrame if (timeFrame !== currentTimeFrame) { @@ -167,7 +190,7 @@ function newTimelineChart () { } }) - timeFrameScale.initialize(timeLineCoordinateSystem) + thisObject.timeFrameScale.initialize() initializationReady = true callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) @@ -233,7 +256,7 @@ function newTimelineChart () { function getContainer (point) { let container - container = timeFrameScale.getContainer(point) + container = thisObject.timeFrameScale.getContainer(point) if (container !== undefined) { return container } @@ -250,7 +273,23 @@ function newTimelineChart () { } function childrenPhysics () { + if (thisObject.timeFrameScale === undefined) { return } + thisObject.timeFrameScale.physics() + + /* thisObject.timeFrameScale Positioning */ + + thisObject.timeFrameScale.container.frame.position.x = mouse.position.x - thisObject.timeFrameScale.container.frame.width / 2 + + timePoint = { + x: 0, + y: thisObject.container.frame.height + } + + timePoint = transformThisPoint(timePoint, thisObject.container.frame.container) + timePoint = thisObject.container.fitFunction(timePoint) + + thisObject.timeFrameScale.container.frame.position.y = timePoint.y - thisObject.timeFrameScale.container.frame.height } function tooTiny () { @@ -283,7 +322,7 @@ function newTimelineChart () { if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() plotterManager.draw() - timeFrameScale.draw() + thisObject.timeFrameScale.draw() } } diff --git a/Scales/Commons.js b/Scales/Commons.js index 6e52c9c99..05808196d 100644 --- a/Scales/Commons.js +++ b/Scales/Commons.js @@ -3,11 +3,11 @@ function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, contain let fontSize1 = 20 let fontSize2 = 10 - const RED_LINE_HIGHT = 5 + const RED_LINE_HIGHT = 4 const OPACITY = 1 let params = { - cornerRadius: 3, + cornerRadius: 5, lineWidth: RED_LINE_HIGHT, container: container, borderColor: UI_COLOR.RUSTED_RED, diff --git a/Scales/RateScale.js b/Scales/RateScale.js index dc675d4db..33533b17e 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -26,7 +26,7 @@ function newRateScale () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true - thisObject.container.frame.width = 110 + thisObject.container.frame.width = 190 thisObject.container.frame.height = 25 let isMouseOver diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js index a34e3df91..130056f07 100644 --- a/Scales/TimeFrameScale.js +++ b/Scales/TimeFrameScale.js @@ -4,7 +4,9 @@ function newTimeFrameScale () { let thisObject = { timeFrame: undefined, container: undefined, + fitFunction: undefined, draw: draw, + physics: physics, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -14,15 +16,7 @@ function newTimeFrameScale () { const TIME_PERIOD_DEFAULT_VALUE = 0 const MIN_HEIGHT = 50 - let mouse = { - position: { - x: 0, - y: 0 - } - } - let visible = true - let timeLineCoordinateSystem let objectStorage = {} let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE let timeFrameIndex = TIME_PERIOD_DEFAULT_VALUE @@ -30,8 +24,6 @@ function newTimeFrameScale () { let timeFrameLabel = '' let onMouseWheelEventSubscriptionId - let onMouseOverEventSubscriptionId - let onMouseNotOverEventSubscriptionId let onZoomChangedEventSubscriptionId setupContainer() @@ -44,44 +36,35 @@ function newTimeFrameScale () { thisObject.container.isDraggeable = false thisObject.container.isClickeable = false thisObject.container.isWheelable = true + + thisObject.container.frame.width = 190 + thisObject.container.frame.height = 25 } function finalize () { thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId) - thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId) - thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) viewPort.eventHandler.stopListening(onZoomChangedEventSubscriptionId) - timeLineCoordinateSystem = undefined objectStorage = undefined thisObject.container.finalize() thisObject.container = undefined - setupContainer() + thisObject.fitFunction = undefined } - function initialize (pTimeLineCoordinateSystem) { - timeLineCoordinateSystem = pTimeLineCoordinateSystem - + function initialize () { onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) readObjectState() newTimeFrame() - onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - mouse.position.x = event.x - mouse.position.y = event.y - - visible = true - }) - - onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { - visible = false - }) - onZoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) } + function physics () { + + } + function onZoomChanged (event) { if (event !== undefined) { // it is undefined when the level is just being animated. let currentTimeFrame = thisObject.timeFrame @@ -133,24 +116,9 @@ function newTimeFrameScale () { newTimeFrame() } - function getContainer (pPoint) { - let container - -/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */ - let point = { - x: 0, - y: 0 - } - - point.x = pPoint.x - thisObject.container.frame.position.x - point.y = pPoint.y - thisObject.container.frame.position.y - - if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { + function getContainer (point) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container - } else { - /* This point does not belong to this space. */ - - return undefined } } @@ -183,142 +151,16 @@ function newTimeFrameScale () { function draw () { if (visible === false) { return } -/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still -to be visible at the top of the viewPort. */ + drawTimeFrame() + } - let frame = thisObject.container.parentContainer.frame - let point1 - let point2 - let point3 - let point4 - - point1 = { - x: 0, - y: frame.height - frame.height * 2 / 100 - } - - point2 = { - x: frame.width, - y: frame.height - frame.height * 2 / 100 - } - - point3 = { - x: frame.width, - y: frame.height - } - - point4 = { - x: 0, - y: frame.height - } - - point5 = { - x: 0, - y: 0 - } - - /* Now the transformations. */ - - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) - point5 = transformThisPoint(point5, frame.container) - - point1 = viewPort.fitIntoVisibleArea(point1) - point2 = viewPort.fitIntoVisibleArea(point2) - point3 = viewPort.fitIntoVisibleArea(point3) - point4 = viewPort.fitIntoVisibleArea(point4) - point5 = viewPort.fitIntoVisibleArea(point5) - - if (point3.y - point2.y < MIN_HEIGHT) { - point1.y = point3.y - MIN_HEIGHT - point2.y = point3.y - MIN_HEIGHT - } - - /* Lets start the drawing. */ - - let displacement = viewPort.margins.BOTTOM - COCKPIT_SPACE_HEIGHT - - /* - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y + displacement) - browserCanvasContext.lineTo(point2.x, point2.y + displacement) - browserCanvasContext.lineTo(point3.x, point3.y + displacement) - browserCanvasContext.lineTo(point4.x, point4.y + displacement) - browserCanvasContext.lineTo(point1.x, point1.y + displacement) - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() -*/ - - thisObject.container.frame.position.x = point1.x - thisObject.container.frame.position.y = point1.y + displacement - - thisObject.container.frame.width = point2.x - point1.x - thisObject.container.frame.height = point3.y - point2.y - - /* Common Variables */ + function drawTimeFrame () { + if (thisObject.visible === false || timeFrameLabel === undefined) { return } let label = timeFrameLabel.split('-') let label1 = label[0] let label2 = label[1].toUpperCase() - let fontSize1 = 20 - let fontSize2 = 10 - const RED_LINE_HIGHT = 5 - const OPACITY = 1 - - let centerPoint = { - x: mouse.position.x, - y: point1.y + viewPort.margins.BOTTOM - } - - let container = newContainer() - container.initialize('Visible Time Scale') - container.frame.width = 60 - container.frame.height = 25 - container.frame.position.x = centerPoint.x - container.frame.width / 2 - container.frame.position.y = centerPoint.y - container.frame.height / 2 - - let params = { - cornerRadius: 3, - lineWidth: RED_LINE_HIGHT, - container: container, - borderColor: UI_COLOR.RUSTED_RED, - castShadow: false, - backgroundColor: UI_COLOR.DARK, - opacity: OPACITY - } - - roundedCornersBackground(params) - - /* Place the Text */ - - let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO - - let labelPoint1 = { - x: mouse.position.x - xOffset1 / 2 - 14, - y: point1.y + viewPort.margins.BOTTOM + 6 - } - - browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) - - let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO - - let labelPoint2 = { - x: mouse.position.x - xOffset2 / 2 - 3 + 14, - y: point1.y + viewPort.margins.BOTTOM + 6 - } - - browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) + drawScaleDisplay(label1, label2, 10, 60, thisObject.container, thisObject.fitFunction) } }