From bbbffe0e4a05f04ca8613f32e120172763790a26 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 Jan 2020 15:59:51 +0100 Subject: [PATCH] Scales not visible grayed out --- ChartsSpace/TimeMachine.js | 34 +++++++++++++++++------- ChartsSpace/TimelineChart.js | 16 ++++++++--- Scales/Commons.js | 22 +++++++++++++--- Scales/RateScale.js | 51 +++++++++++++++++++++++------------- Scales/TimeFrameScale.js | 46 ++++++++++++++++++++++++-------- Scales/TimeScale.js | 51 +++++++++++++++++++++++------------- Spaces/ChartSpace.js | 10 +++++++ 7 files changed, 165 insertions(+), 65 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 028e39908..ed0bd74a1 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -24,8 +24,9 @@ function newTimeMachine () { payload: undefined, timelineCharts: [], physics: physics, - drawBackground: drawBackground, draw: draw, + drawBackground: drawBackground, + drawForeground: drawForeground, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize, finalize: finalize @@ -407,15 +408,6 @@ function newTimeMachine () { } } - function drawBackground () { - if (thisObject.container.frame.isInViewPort()) { - for (let i = 0; i < thisObject.timelineCharts.length; i++) { - let timelineChart = thisObject.timelineCharts[i] - timelineChart.drawBackground() - } - } - } - function draw () { if (thisObject.container.frame.isInViewPort()) { for (let i = 0; i < thisObject.timelineCharts.length; i++) { @@ -431,6 +423,28 @@ function newTimeMachine () { } } + function drawBackground () { + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < thisObject.timelineCharts.length; i++) { + let timelineChart = thisObject.timelineCharts[i] + timelineChart.drawBackground() + } + } + } + + function drawForeground () { + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < thisObject.timelineCharts.length; i++) { + let timelineChart = thisObject.timelineCharts[i] + timelineChart.drawForeground() + } + + if (thisObject.timeScale !== undefined) { thisObject.timeScale.drawForeground() } + if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.drawForeground() } + if (thisObject.rateScale !== undefined) { thisObject.rateScale.drawForeground() } + } + } + function recalculateCoordinateSystem () { let minValue = { x: MIN_PLOTABLE_DATE.valueOf(), diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index 278295272..8fdd77296 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -18,8 +18,9 @@ function newTimelineChart () { plotterManager: undefined, upstreamTimeFrame: undefined, physics: physics, - drawBackground: drawBackground, draw: draw, + drawBackground: drawBackground, + drawForeground: drawForeground, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -358,6 +359,13 @@ function newTimelineChart () { } } + function draw () { + if (thisObject.container.frame.isInViewPort()) { + if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.draw() } + if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } + } + } + function drawBackground () { if (thisObject.container.frame.isInViewPort()) { if (window.CHART_ON_FOCUS === '') { @@ -368,10 +376,10 @@ function newTimelineChart () { } } - function draw () { + function drawForeground () { 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.drawForeground() } + if (thisObject.rateScale !== undefined) { thisObject.rateScale.drawForeground() } } } diff --git a/Scales/Commons.js b/Scales/Commons.js index 8871558ff..db0bb567e 100644 --- a/Scales/Commons.js +++ b/Scales/Commons.js @@ -1,5 +1,5 @@ -function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, xExtraOffSet3, icon1, icon2, container) { +function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, xExtraOffSet3, icon1, icon2, container, backgroundColor) { let fontSize1 = 10 let fontSize2 = 20 let fontSize3 = 10 @@ -8,12 +8,12 @@ function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, const OPACITY = 1 let params = { - cornerRadius: 5, - lineWidth: RED_LINE_HIGHT, + cornerRadius: 15, + lineWidth: 2, container: container, borderColor: UI_COLOR.RUSTED_RED, castShadow: false, - backgroundColor: UI_COLOR.BLACK, + backgroundColor: backgroundColor, opacity: OPACITY } @@ -104,3 +104,17 @@ function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, } } } + +function drawScaleDisplayCover (container) { + let params = { + cornerRadius: 15, + lineWidth: 2, + container: container, + borderColor: UI_COLOR.WHITE, + castShadow: false, + backgroundColor: UI_COLOR.WHITE, + opacity: '0.75' + } + + roundedCornersBackground(params) +} diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 1b3214baf..08deeee63 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -10,6 +10,7 @@ function newRateScale () { onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer, physics: physics, draw: draw, + drawForeground: drawForeground, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -204,12 +205,41 @@ function newRateScale () { } function draw () { - drawRate() - drawArrows() + drawScaleBox() + if (visible === false) { + drawScaleDisplayCover(thisObject.container) + } + } + + function drawForeground () { + if (isMouseOver === true) { + drawScaleBox() + drawArrows() + } + } + + function drawScaleBox () { + if (thisObject.rate === undefined) { return } + + let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2) + let labelArray = label.split('.') + let label1 = thisObject.payload.node.payload.parentNode.name + let label2 = (Math.trunc(thisObject.rate)).toLocaleString() + let label3 = labelArray[1] + + let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) + let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type) + + let backgroundColor + if (visible === true) { + backgroundColor = UI_COLOR.BLACK + } else { + backgroundColor = UI_COLOR.DARK + } + drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor) } function drawArrows () { - if (isMouseOver !== true) { return } if (visible === false || thisObject.rate === undefined) { return } const X_OFFSET = thisObject.container.frame.width / 2 @@ -309,19 +339,4 @@ function newRateScale () { browserCanvasContext.stroke() } } - - function drawRate () { - if (visible === false || thisObject.rate === undefined) { return } - - let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2) - let labelArray = label.split('.') - let label1 = thisObject.payload.node.payload.parentNode.name - let label2 = (Math.trunc(thisObject.rate)).toLocaleString() - let label3 = labelArray[1] - - let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) - let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type) - - drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container) - } } diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js index 8b3d8f9e5..0fc5e9f93 100644 --- a/Scales/TimeFrameScale.js +++ b/Scales/TimeFrameScale.js @@ -8,6 +8,7 @@ function newTimeFrameScale () { payload: undefined, onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer, draw: draw, + drawForeground: drawForeground, physics: physics, getContainer: getContainer, initialize: initialize, @@ -19,6 +20,8 @@ function newTimeFrameScale () { const MIN_HEIGHT = 50 let visible = true + let isMouseOver + let objectStorage = {} let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE let timeFrameIndex = TIME_PERIOD_DEFAULT_VALUE @@ -28,6 +31,7 @@ function newTimeFrameScale () { let onMouseWheelEventSubscriptionId let onZoomChangedEventSubscriptionId let onMouseOverEventSubscriptionId + let onMouseNotOverEventSubscriptionId let timeLineCoordinateSystem let limitingContainer @@ -58,6 +62,7 @@ function newTimeFrameScale () { thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId) viewPort.eventHandler.stopListening(onZoomChangedEventSubscriptionId) thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) objectStorage = undefined @@ -77,11 +82,7 @@ function newTimeFrameScale () { onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) onZoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - - function onMouseOver () { - event.containerId = thisObject.container.id - thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event) - } + onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function onMouseOverSomeTimeMachineContainer (event) { @@ -103,6 +104,16 @@ function newTimeFrameScale () { } } + function onMouseOver () { + isMouseOver = true + event.containerId = thisObject.container.id + thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event) + } + + function onMouseNotOver () { + isMouseOver = false + } + function physics () { /* Container Limits */ @@ -244,13 +255,20 @@ function newTimeFrameScale () { } function draw () { - if (visible === false) { return } - - drawTimeFrame() + drawScaleBox() + if (visible === false) { + drawScaleDisplayCover(thisObject.container) + } } - function drawTimeFrame () { - if (visible === false || timeFrameLabel === undefined) { return } + function drawForeground () { + if (isMouseOver === true) { + drawScaleBox() + } + } + + function drawScaleBox () { + if (timeFrameLabel === undefined) { return } let label = timeFrameLabel.split('-') let label1 = thisObject.payload.node.payload.parentNode.name @@ -260,6 +278,12 @@ function newTimeFrameScale () { let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type) - drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container) + let backgroundColor + if (visible === true) { + backgroundColor = UI_COLOR.BLACK + } else { + backgroundColor = UI_COLOR.DARK + } + drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor) } } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index d5ed2497e..55842cdc6 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -10,6 +10,7 @@ function newTimeScale () { onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer, physics: physics, draw: draw, + drawForeground: drawForeground, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -186,12 +187,41 @@ function newTimeScale () { } function draw () { - drawTime() - drawArrows() + drawScaleBox() + if (visible === false) { + drawScaleDisplayCover(thisObject.container) + } + } + + function drawForeground () { + if (isMouseOver === true) { + drawScaleBox() + drawArrows() + } + } + + function drawScaleBox () { + if (thisObject.date === undefined) { return } + + let label = thisObject.date.toUTCString() + let labelArray = label.split(' ') + let label1 = thisObject.payload.node.payload.parentNode.name + let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] + let label3 = labelArray[4] + + let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) + let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type) + + let backgroundColor + if (visible === true) { + backgroundColor = UI_COLOR.BLACK + } else { + backgroundColor = UI_COLOR.DARK + } + drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor) } function drawArrows () { - if (isMouseOver !== true) { return } if (visible === false || thisObject.date === undefined) { return } const X_OFFSET = thisObject.container.frame.width / 2 @@ -291,19 +321,4 @@ function newTimeScale () { browserCanvasContext.stroke() } } - - function drawTime () { - if (visible === false || thisObject.date === undefined) { return } - - let label = thisObject.date.toUTCString() - let labelArray = label.split(' ') - let label1 = thisObject.payload.node.payload.parentNode.name - let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] - let label3 = labelArray[4] - - let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) - let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type) - - drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container) - } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 7f4fcca26..ada3eb8b5 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -294,6 +294,8 @@ function newChartSpace () { let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1] timeMachine.draw() } + + drawForeground() } function drawBackground () { @@ -304,6 +306,14 @@ function newChartSpace () { timeMachine.drawBackground() } } + + function drawForeground () { + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1] + timeMachine.drawForeground() + } + } + function drawSpaceBackground () { let opacity = '1' let fromPoint = {