From f665ebf6a77c79640afdd6fa8f56eaa41f23c6ae Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 10 Apr 2019 13:34:07 +0200 Subject: [PATCH] Improvements in Containers --- Canvas.js | 1 + Container.js | 69 ++++++++++++++++++++++------ Frame.js | 15 +++--- PlottersManager.js | 24 ++-------- Scales/{topScale.js => TimeScale.js} | 20 ++++---- Spaces/ChartSpace.js | 22 +++------ TimeMachine.js | 52 +++++++++++---------- TimelineChart.js | 20 ++------ 8 files changed, 117 insertions(+), 106 deletions(-) rename Scales/{topScale.js => TimeScale.js} (54%) diff --git a/Canvas.js b/Canvas.js index 4e6330e49..23df82e20 100644 --- a/Canvas.js +++ b/Canvas.js @@ -222,6 +222,7 @@ function newCanvas () { } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.stack = ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } diff --git a/Container.js b/Container.js index 76eb3357f..60d54df14 100644 --- a/Container.js +++ b/Container.js @@ -1,6 +1,6 @@ function newContainer () { - var container = { + let thisObject = { frame: undefined, displacement: undefined, eventHandler: undefined, @@ -9,24 +9,63 @@ function newContainer () { isClickeable: false, isWheelable: false, name: undefined, - initialize: initialize + initialize: initialize, + connectToParent: connectToParent } - return container + let connectedToParentWidth = false + let connectedToParentHeight = false - function initialize () { - var frame = newFrame() - frame.initialize() - this.frame = frame - frame.container = container + return thisObject - var eventHandler = newEventHandler() - eventHandler.initialize() - eventHandler.name = container.name - this.eventHandler = eventHandler + function initialize (pName) { + thisObject.name = pName - var displacement = newDisplacement() - this.displacement = displacement - displacement.container = container + thisObject.frame = newFrame() + thisObject.frame.initialize() + thisObject.frame.containerName = pName + thisObject.frame.container = thisObject + + thisObject.eventHandler = newEventHandler() + thisObject.eventHandler.initialize() + thisObject.eventHandler.name = pName + + thisObject.displacement = newDisplacement() + thisObject.displacement.container = thisObject + thisObject.displacement.containerName = pName + } + + function connectToParent (parentContainer, onWidth, onHeight) { + connectedToParentWidth = onWidth + connectedToParentHeight = onHeight + + thisObject.displacement.parentDisplacement = parentContainer.displacement + thisObject.frame.parentFrame = parentContainer.frame + thisObject.parentContainer = parentContainer + thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + + if (connectedToParentWidth) { + thisObject.frame.width = thisObject.parentContainer.frame.width + } + if (connectedToParentHeight) { + thisObject.frame.height = thisObject.parentContainer.frame.height + } + } + + function onParentDimmensionsChanged () { + let dimmensionsChanged = false + if (connectedToParentWidth) { + thisObject.frame.width = thisObject.parentContainer.frame.width + dimmensionsChanged = true + } + if (connectedToParentHeight) { + thisObject.frame.height = thisObject.parentContainer.frame.height + dimmensionsChanged = true + } + + if (dimmensionsChanged) { + thisObject.eventHandler.raiseEvent('Dimmensions Changed') + console.log(thisObject.name + ' new width = ' + thisObject.frame.width) + } } } diff --git a/Frame.js b/Frame.js index 7ae3e4f29..93a4627e0 100644 --- a/Frame.js +++ b/Frame.js @@ -241,7 +241,7 @@ function newFrame () { return true } - function isThisPointHere (point, outsideViewPort) { + function isThisPointHere (point, outsideViewPort, dontTransform) { // The second parameter is usefull when you want to check a point that you already know is outside the viewport. /* We need not to modify the point received, so me make a copy of it. */ @@ -253,12 +253,13 @@ function newFrame () { /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ - - if (outsideViewPort === true) { - checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) - checkPoint = this.container.frame.unframeThisPoint(checkPoint) - } else { - checkPoint = unTransformThisPoint(checkPoint, frame.container) + if (dontTransform === false || dontTransform === undefined) { + if (outsideViewPort === true) { + checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) + checkPoint = this.container.frame.unframeThisPoint(checkPoint) + } else { + checkPoint = unTransformThisPoint(checkPoint, frame.container) + } } /* Now we check if the resulting point is whin the current Frame. */ diff --git a/PlottersManager.js b/PlottersManager.js index 80f07e8ef..2c0acc40e 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -23,12 +23,8 @@ function newPlottersManager () { finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container - - container.displacement.containerName = 'Plotter Manager' - container.frame.containerName = 'Plotter Manager' + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) let initializationReady = false @@ -255,13 +251,7 @@ function newPlottersManager () { let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName) - plotter.container.displacement.parentDisplacement = thisObject.container.displacement - plotter.container.frame.parentFrame = thisObject.container.frame - - plotter.container.parentContainer = thisObject.container - - plotter.container.frame.width = thisObject.container.frame.width * 1 - plotter.container.frame.height = thisObject.container.frame.height * 1 + plotter.container.connectToParent(thisObject.container, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -503,13 +493,7 @@ function newPlottersManager () { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName) - plotter.container.displacement.parentDisplacement = thisObject.container.displacement - plotter.container.frame.parentFrame = thisObject.container.frame - - plotter.container.parentContainer = thisObject.container - - plotter.container.frame.width = thisObject.container.frame.width * 1 - plotter.container.frame.height = thisObject.container.frame.height * 1 + plotter.container.connectToParent(thisObject.container, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 diff --git a/Scales/topScale.js b/Scales/TimeScale.js similarity index 54% rename from Scales/topScale.js rename to Scales/TimeScale.js index bfe552c39..8d773322d 100644 --- a/Scales/topScale.js +++ b/Scales/TimeScale.js @@ -1,9 +1,10 @@ -function newRigthScale () { +function newTimeScale () { let thisObject = { container: undefined, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + lenghtPercentage: 100 } const RIGHT_MARGIN = 50 @@ -12,8 +13,8 @@ function newRigthScale () { container.initialize() thisObject.container = container - thisObject.container.frame.width = RIGHT_MARGIN - thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y + thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x + thisObject.container.frame.height = 50 container.frame.position.x = viewPort.visibleArea.bottomRight.x container.frame.position.y = TOP_SPACE_HEIGHT @@ -30,10 +31,13 @@ function newRigthScale () { function onMouseWheel (pDelta) { if (pDelta < 0) { - pDelta = -0.1 + thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10 + if (thisObject.lenghtPercentage < 50) { thisObject.lenghtPercentage = 50 } } else { - pDelta = 0.1 + thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10 + if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 } } + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', thisObject.lenghtPercentage) } function getContainer (point) { @@ -41,7 +45,7 @@ function newRigthScale () { /* First we check if this point is inside this object UI. */ - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return this.container } else { /* This point does not belong to this space. */ @@ -51,6 +55,6 @@ function newRigthScale () { } function draw () { - + thisObject.container.frame.draw(false, true) } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index b047ad9ae..fecd50541 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -23,20 +23,16 @@ function newChartSpace () { finalize: finalize } - var container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.frame.width = CHART_SPACE_WIDTH thisObject.container.frame.height = CHART_SPACE_HEIGHT - container.displacement.containerName = 'Chart Space' - container.frame.containerName = 'Chart Space' + thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 - container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 - container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 - - container.isDraggeable = false + thisObject.container.isDraggeable = false return thisObject @@ -63,16 +59,10 @@ function newChartSpace () { var timeMachine = newTimeMachine() - timeMachine.container.displacement.parentDisplacement = this.container.displacement - timeMachine.container.frame.parentFrame = this.container.frame - - timeMachine.container.parentContainer = this.container + timeMachine.container.connectToParent(thisObject.container, true, true) /* We make the time machine a little bit smaller than the current space. */ - timeMachine.container.frame.width = this.container.frame.width * 1 - timeMachine.container.frame.height = this.container.frame.height * 1 - timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 diff --git a/TimeMachine.js b/TimeMachine.js index 492397d7d..d469dc08f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -25,18 +25,16 @@ function newTimeMachine () { finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) thisObject.container.isDraggeable = false - container.displacement.containerName = 'Time Machine' - container.frame.containerName = 'Time Machine' - 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 + return thisObject function finalize () { @@ -55,24 +53,27 @@ 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) let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) - /* 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. */ + /* Each Time Machine has a Time Scale. */ + + timeScale = newTimeScale() + timeScale.initialize() + + timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', onTimeScaleChanged) + + /* 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. let timelineChart = newTimelineChart() - timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement - timelineChart.container.frame.parentFrame = thisObject.container.frame + timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.parentContainer = thisObject.container - - timelineChart.container.frame.width = thisObject.container.frame.width * 1 timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -131,12 +132,8 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement - timelineChart.container.frame.parentFrame = thisObject.container.frame + timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.parentContainer = thisObject.container - - timelineChart.container.frame.width = thisObject.container.frame.width * 1 timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -164,6 +161,11 @@ function newTimeMachine () { } } + function onTimeScaleChanged (newPercentageLength) { + thisObject.container.frame.width = thisObject.container.parentContainer.frame.width * newPercentageLength / 100 + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed') + } + function drawBackground () { for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i] @@ -178,6 +180,8 @@ function newTimeMachine () { let chart = this.charts[i] chart.draw() } + + timeScale.draw() } function getContainer (point) { @@ -187,14 +191,12 @@ function newTimeMachine () { /* Now we see which is the inner most container that has it */ + container = timeScale.getContainer(point) + if (container !== undefined) { return container } + for (let i = 0; i < this.charts.length; i++) { container = this.charts[i].getContainer(point) - - if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ - - return container - } + if (container !== undefined) { return container } } /* The point does not belong to any inner container, so we return the current container. */ diff --git a/TimelineChart.js b/TimelineChart.js index 3058a650d..142fa0c0a 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -21,12 +21,8 @@ finalize: finalize } - let container = newContainer() - container.initialize() - thisObject.container = container - - container.displacement.containerName = 'Timeline Chart' - container.frame.containerName = 'Timeline Chart' + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) let chartGrid let breakpointsBar @@ -114,12 +110,12 @@ chartGrid.initialize() breakpointsBar = newBreakpointsBar() - breakpointsBar.initialize(container, timeLineCoordinateSystem) + breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) recalculateScale() // moveViewPortToCurrentDatetime(); - moveToUserPosition(container, timeLineCoordinateSystem) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem) timePeriod = INITIAL_TIME_PERIOD datetime = INITIAL_DATE @@ -132,13 +128,7 @@ plotterManager = newPlottersManager() - plotterManager.container.displacement.parentDisplacement = thisObject.container.displacement - plotterManager.container.frame.parentFrame = thisObject.container.frame - - plotterManager.container.parentContainer = thisObject.container - - plotterManager.container.frame.width = thisObject.container.frame.width - plotterManager.container.frame.height = thisObject.container.frame.height + plotterManager.container.connectToParent(thisObject.container, true, true) plotterManager.container.frame.position.x = 0 plotterManager.container.frame.position.y = 0