From d993d13b3244fe0fac0c775e68feb430cb0624e5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 24 Apr 2018 11:09:32 +0200 Subject: [PATCH] First 2 Panels working well at the Panel Space --- .vs/AAWeb/v15/.suo | Bin 49152 -> 56320 bytes Canvas.js | 128 +++++++++++------ .../{ControlPanel.js => TimeControlPanel.js} | 70 +++++----- Project.njsproj | 6 +- Spaces/PanelsSpace.js | 131 ++++++++++++++++++ TimeMachine.js | 92 ++++-------- index.html | 6 +- server.js | 8 +- 8 files changed, 294 insertions(+), 147 deletions(-) rename Panels/{ControlPanel.js => TimeControlPanel.js} (74%) create mode 100644 Spaces/PanelsSpace.js diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 3d281c8beaaadc9b47ef7eef633af6aef623dc9a..353cf82408447ab425c8593594f03fdd1d3909f1 100644 GIT binary patch delta 6394 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 Kk^0|l*?$4v{1OQO diff --git a/Canvas.js b/Canvas.js index 843fd1740..176015c5a 100644 --- a/Canvas.js +++ b/Canvas.js @@ -21,7 +21,7 @@ Canvas ---> flaotingSpace | | - ---> PanelsSpace + ---> panelsSpace */ @@ -55,6 +55,7 @@ function newCanvas() { eventHandler: undefined, chartSpace: undefined, floatingSpace: undefined, + panelsSpace: undefined, animation: undefined, initialize: initialize }; @@ -71,17 +72,24 @@ function newCanvas() { addCanvasEvents(); - /* The canvas has one ChartSpace child. Here is where we get it. */ + /* Instantiate all the children of Canvas object */ + + let panelsSpace = newPanelsSpace(); + panelsSpace.initialize(); + + this.panelsSpace = panelsSpace; + + let floatingSpace = newFloatingSpace(); + floatingSpace.initialize(); + + this.floatingSpace = floatingSpace; let chartSpace = newChartSpace(); chartSpace.initialize(); this.chartSpace = chartSpace; - let floatingSpace = newFloatingSpace(); - floatingSpace.initialize(); - - this.floatingSpace = floatingSpace; + /* Splash Screen */ splashScreen = newSplashScreen(); splashScreen.initialize(); @@ -93,8 +101,9 @@ function newCanvas() { /* Here we add all the functions that will be called during the animation cycle. */ - animation.addCallBackFunction("Chart Space", this.chartSpace.draw); - animation.addCallBackFunction("Floating Space", this.floatingSpace.physicsLoop); + animation.addCallBackFunction("Chart Space", thisObject.chartSpace.draw); + animation.addCallBackFunction("Floating Space", thisObject.floatingSpace.physicsLoop); + animation.addCallBackFunction("Panels Space", thisObject.panelsSpace.draw); animation.addCallBackFunction("Splash Screen", splashScreen.draw); animation.start(); @@ -144,73 +153,102 @@ function newCanvas() { function onMouseDown(event) { + /* + + There are four types of elements that can be dragged. + + 1. Panels. + 2. Floating Elements (Currently only Balls). + 3. Charts. + 4. The Viewport. + + We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport. + + */ + dragVector.downX = event.pageX; dragVector.downY = event.pageY; + let point = { + x: event.pageX, + y: event.pageY + }; + + let container; + + /* We check first if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.getContainer(point); + + if (container !== undefined && container.isDraggeable === true) { + + containerBeingDragged = container; + containerDragStarted = true; + return; + } + /* We check first if the mouse is over a ball/ */ ballBeingDragged = thisObject.floatingSpace.isInside(event.pageX, event.pageY); if (ballBeingDragged >= 0) { ballDragStarted = true; + return; + } - } else { + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - /* If it is not, then we check if it is over any of the existing containers. */ + container = thisObject.chartSpace.getContainer(point); - let point = { - x: event.pageX, - y: event.pageY - }; + if (container !== undefined && container.isDraggeable === true) { - let container = thisObject.chartSpace.getContainer(point); - - if (container !== undefined && container.isDraggeable === true) { - - containerBeingDragged = container; - containerDragStarted = true; - } else { - viewPortBeingDragged = true; - } - - } + containerBeingDragged = container; + containerDragStarted = true; + return; + } + viewPortBeingDragged = true; } function onMouseClick(event) { - dragVector.downX = event.pageX; - dragVector.downY = event.pageY; + let point = { + x: event.pageX, + y: event.pageY + }; - /* We check first if the mouse is over a ball/ */ + let container; + + /* We check first if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.getContainer(point); + + if (container !== undefined && container.isClickeable === true) { + + container.eventHandler.raiseEvent('onMouseClick', event); + return; + } + + /* We check first if the mouse is over a ball/ */ let ballBeingClicked = thisObject.floatingSpace.isInside(event.pageX, event.pageY); if (ballBeingClicked >= 0) { /* Right now we do nothing with this. */ + return; - } else { + } - /* If it is not, then we check if it is over any of the existing containers. */ + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - let point = { - x: event.pageX, - y: event.pageY - }; + container = thisObject.chartSpace.getContainer(point); - let container = thisObject.chartSpace.getContainer(point); - - if (container !== undefined && container.isClickeable === true) { - - /* We deliver the event to the container that is waiting for it. */ - - container.eventHandler.raiseEvent('onMouseClick', event); - - } - - } + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', event); + return; + } } function onMouseUp(event) { diff --git a/Panels/ControlPanel.js b/Panels/TimeControlPanel.js similarity index 74% rename from Panels/ControlPanel.js rename to Panels/TimeControlPanel.js index 3b27ba910..949cb69af 100644 --- a/Panels/ControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -1,11 +1,11 @@  -function newControlPanel() { +function newTimeControlPanel() { let PLAY_STEP = 0; - var controlPanel = { + var thisObject = { container: undefined, buttons: undefined, setDatetime: setDatetime, @@ -19,12 +19,12 @@ function newControlPanel() { var container = newContainer(); container.initialize(); container.isDraggeable = true; - controlPanel.container = container; - controlPanel.container.frame.containerName = "Time Control Panel"; + thisObject.container = container; + thisObject.container.frame.containerName = "Time Control Panel"; var playingLoop; // Controls the generation of events that allows to play continuosly the market. - return controlPanel; + return thisObject; @@ -62,8 +62,8 @@ function newControlPanel() { button.initialize(); buttonPosition = { // The first button - x: controlPanel.container.frame.width / 2 - (buttonNames.length * button.container.frame.width) / 2, - y: controlPanel.container.frame.height * 7 / 10 + x: thisObject.container.frame.width / 2 - (buttonNames.length * button.container.frame.width) / 2, + y: thisObject.container.frame.height * 7 / 10 }; button.container.frame.position.x = buttonPosition.x + lastX; button.container.frame.position.y = buttonPosition.y; @@ -84,7 +84,7 @@ function newControlPanel() { - controlPanel.buttons = buttons; + thisObject.buttons = buttons; var datetime = INITIAL_DATE; @@ -95,8 +95,8 @@ function newControlPanel() { draw: drawTimeDisplay }; - controlPanel.buttons = buttons; - controlPanel.datetimeDisplay = datetimeDisplay; + thisObject.buttons = buttons; + thisObject.datetimeDisplay = datetimeDisplay; viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged); @@ -151,7 +151,7 @@ function newControlPanel() { function setDatetime(newDatetime) { - controlPanel.datetimeDisplay.currentDatetime = newDatetime; + thisObject.datetimeDisplay.currentDatetime = newDatetime; } @@ -159,10 +159,10 @@ function newControlPanel() { function addTime(seconds) { - var newDate = controlPanel.datetimeDisplay.currentDatetime; + var newDate = thisObject.datetimeDisplay.currentDatetime; newDate.setSeconds(newDate.getSeconds() + seconds); - controlPanel.datetimeDisplay.currentDatetime = newDate; + thisObject.datetimeDisplay.currentDatetime = newDate; } @@ -172,11 +172,11 @@ function newControlPanel() { /* When any of the buttons are pressed, the control panel must turn off the resto of the buttons. */ - for (var i = 0; i < controlPanel.buttons.length; i++) { + for (var i = 0; i < thisObject.buttons.length; i++) { if (i !== buttonPressedIndex) { - var button = controlPanel.buttons[i]; + var button = thisObject.buttons[i]; button.status = 'off'; @@ -186,7 +186,7 @@ function newControlPanel() { /* Now we actualy do something depending on which button was pressed. */ - switch (controlPanel.buttons[buttonPressedIndex].type) { + switch (thisObject.buttons[buttonPressedIndex].type) { case "Fast Backwards": @@ -246,11 +246,11 @@ function newControlPanel() { function pressStepBackwards() { - controlPanel.datetimeDisplay.addTime(-1 * PLAY_STEP / 1000); + thisObject.datetimeDisplay.addTime(-1 * PLAY_STEP / 1000); - var newDatetime = controlPanel.datetimeDisplay.currentDatetime; + var newDatetime = thisObject.datetimeDisplay.currentDatetime; - controlPanel.container.eventHandler.raiseEvent('Datetime Changed', newDatetime); + thisObject.container.eventHandler.raiseEvent('Datetime Changed', newDatetime); } @@ -260,11 +260,11 @@ function newControlPanel() { function pressStepForward() { - controlPanel.datetimeDisplay.addTime(PLAY_STEP / 1000); + thisObject.datetimeDisplay.addTime(PLAY_STEP / 1000); - var newDatetime = controlPanel.datetimeDisplay.currentDatetime; + var newDatetime = thisObject.datetimeDisplay.currentDatetime; - controlPanel.container.eventHandler.raiseEvent('Datetime Changed', newDatetime); + thisObject.container.eventHandler.raiseEvent('Datetime Changed', newDatetime); } @@ -285,10 +285,10 @@ function newControlPanel() { function draw() { - controlPanel.container.frame.draw(false, false, true); + thisObject.container.frame.draw(false, false, true); - for (var i = 0; i < controlPanel.buttons.length; i++) { - controlPanel.buttons[i].draw(); + for (var i = 0; i < thisObject.buttons.length; i++) { + thisObject.buttons[i].draw(); } this.datetimeDisplay.draw(); @@ -302,7 +302,7 @@ function newControlPanel() { let fontSize = 10; - let label = controlPanel.datetimeDisplay.currentDatetime.toUTCString(); + let label = thisObject.datetimeDisplay.currentDatetime.toUTCString(); let labelArray = label.split(" "); label = labelArray[0] + " " + labelArray[1] + " " + labelArray[2] + " " + labelArray[3]; @@ -310,11 +310,11 @@ function newControlPanel() { /* Now we transform x on the actual coordinate on the canvas. */ let labelPoint = { - x: controlPanel.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: controlPanel.container.frame.height * 3.4 / 10 + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height * 3.4 / 10 }; - labelPoint = controlPanel.container.frame.frameThisPoint(labelPoint); + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint); browserCanvasContext.font = fontSize + 'px Courier New'; browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; @@ -327,11 +327,11 @@ function newControlPanel() { /* Now we transform x on the actual coordinate on the canvas. */ labelPoint = { - x: controlPanel.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: controlPanel.container.frame.height * 5.0 / 10 + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height * 5.0 / 10 }; - labelPoint = controlPanel.container.frame.frameThisPoint(labelPoint); + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint); browserCanvasContext.font = fontSize + 'px Courier New'; browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; @@ -342,11 +342,11 @@ function newControlPanel() { /* Now we transform x on the actual coordinate on the canvas. */ labelPoint = { - x: controlPanel.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: controlPanel.container.frame.height * 6.5 / 10 + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height * 6.5 / 10 }; - labelPoint = controlPanel.container.frame.frameThisPoint(labelPoint); + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint); browserCanvasContext.font = fontSize + 'px Courier New'; browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'; diff --git a/Project.njsproj b/Project.njsproj index 97b13e25d..cc4dd052a 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -41,6 +41,9 @@ Code + + Code + Code @@ -91,7 +94,7 @@ - + @@ -120,6 +123,7 @@ + diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js new file mode 100644 index 000000000..1117fd3cc --- /dev/null +++ b/Spaces/PanelsSpace.js @@ -0,0 +1,131 @@ +/* + +The Panel Space y the place wehre all panels live, no matter who create them. + +*/ + +function newPanelsSpace() { + + var thisObject = { + container: undefined, + createNewPanel: createNewPanel, + destroyPanel: destroyPanel, + getPanel: getPanel, + draw: draw, + panels: [], + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + }; + + var container = newContainer(); + container.initialize(); + thisObject.container = container; + thisObject.container.isDraggeable = false; + + container.displacement.containerName = "Panels Space"; + container.frame.containerName = "Panels Space"; + + return thisObject; + + function initialize() { + + /* The space does not create any Panels for itself, it just sits and waits others need panels. */ + + } + + function createNewPanel(pType) { + + let panel; + + switch (pType) { + + case "Time Control Panel": + { + panel = newTimeControlPanel(); + panel.initialize(); + break; + } + + case "Products Panel": + { + panel = newProductsPanel(); + panel.initialize(); + break; + } + } + + thisObject.panels.push(panel); + + panel.handle = Math.floor((Math.random() * 10000000) + 1); + + return panel.handle; + } + + function destroyPanel(pPanelHandle) { + + for (let i = 0; i < thisObject.panels.length; i++) { + + let panel = thisObject.panels[i]; + + if (panel.handle === pPanelHandle) { + thisObject.panels.splice(i, 1); // Delete item from array. + return; + } + } + } + + function getPanel(pPanelHandle) { + + for (let i = 0; i < thisObject.panels.length; i++) { + + let panel = thisObject.panels[i]; + + if (panel.handle === pPanelHandle) { + return panel; + } + } + } + + function draw() { + + thisObject.container.frame.draw(false, false); + + /* When we draw a time machine, that means also to draw all the charts in it. */ + + for (var i = 0; i < thisObject.panels.length; i++) { + + let panel = thisObject.panels[i]; + panel.draw(); + + } + } + + function getContainer(point) { + + let container; + + /* + + We search for the container of panels in the oposite direction than we do it for drawing them, + so panels overlapping others are picked firt although they are drawn last. + + */ + + for (var i = thisObject.panels.length - 1; i >= 0; i--) { + + container = thisObject.panels[i].getContainer(point); + + if (container !== undefined) { + + /* We found an inner container which has the point. We return it. */ + + return container; + } + } + + /* The point does not belong to any inner container, so we return the current container. */ + + return thisObject.container; + + } +} \ No newline at end of file diff --git a/TimeMachine.js b/TimeMachine.js index d589b0042..1824c45bd 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -11,37 +11,36 @@ each one with it own charts, and each one positioned at an especific point in ti function newTimeMachine() { - var timeMachine = { + let thisObject = { container: undefined, - controlPanel: undefined, draw: draw, charts: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize }; - var container = newContainer(); + let container = newContainer(); container.initialize(); - timeMachine.container = container; - timeMachine.container.isDraggeable = false; + thisObject.container = container; + thisObject.container.isDraggeable = false; container.displacement.containerName = "Time Machine"; container.frame.containerName = "Time Machine"; - let botsPanel; + let controlPanelHandle; // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... + let productsPanelHandle; // ... also to request a reference to the object for the cases we need it. - return timeMachine; + return thisObject; function initialize() { /* Each Time Machine has a Control Panel. */ - var controlPanel = newControlPanel(); - controlPanel.initialize(); - this.controlPanel = controlPanel; + controlPanelHandle = canvas.panelsSpace.createNewPanel("Time Control Panel"); + let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle); - botsPanel = newProductsPanel(); - botsPanel.initialize(); + productsPanelHandle = canvas.panelsSpace.createNewPanel("Products Panel"); + let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle); let iteration = 0; @@ -49,24 +48,24 @@ function newTimeMachine() { let timelineChart = newTimelineChart(); - timelineChart.container.displacement.parentDisplacement = timeMachine.container.displacement; - timelineChart.container.frame.parentFrame = timeMachine.container.frame; + timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement; + timelineChart.container.frame.parentFrame = thisObject.container.frame; - timelineChart.container.parentContainer = timeMachine.container; + timelineChart.container.parentContainer = thisObject.container; - timelineChart.container.frame.width = timeMachine.container.frame.width * 1; - timelineChart.container.frame.height = timeMachine.container.frame.height * 1 * CHART_ASPECT_RATIO; + timelineChart.container.frame.width = thisObject.container.frame.width * 1; + timelineChart.container.frame.height = thisObject.container.frame.height * 1 * CHART_ASPECT_RATIO; - timelineChart.container.frame.position.x = timeMachine.container.frame.width / 2 - timelineChart.container.frame.width / 2; + timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2; timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration; - timelineChart.initialize(1, INITIAL_DEFAULT_MARKET, botsPanel, onDefaultMarketInitialized); + timelineChart.initialize(1, INITIAL_DEFAULT_MARKET, productsPanel, onDefaultMarketInitialized); iteration++; function onDefaultMarketInitialized() { - timeMachine.charts.push(timelineChart); + thisObject.charts.push(timelineChart); controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined); timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime); @@ -75,7 +74,6 @@ function newTimeMachine() { } - function initializeTheRestOfTheMarkets() { markets.forEach(initializeTimelineChart); @@ -89,36 +87,31 @@ function newTimeMachine() { let timelineChart = newTimelineChart(); - timelineChart.container.displacement.parentDisplacement = timeMachine.container.displacement; - timelineChart.container.frame.parentFrame = timeMachine.container.frame; + timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement; + timelineChart.container.frame.parentFrame = thisObject.container.frame; - timelineChart.container.parentContainer = timeMachine.container; + timelineChart.container.parentContainer = thisObject.container; - timelineChart.container.frame.width = timeMachine.container.frame.width * 1; - timelineChart.container.frame.height = timeMachine.container.frame.height * 1 * CHART_ASPECT_RATIO; + timelineChart.container.frame.width = thisObject.container.frame.width * 1; + timelineChart.container.frame.height = thisObject.container.frame.height * 1 * CHART_ASPECT_RATIO; - timelineChart.container.frame.position.x = timeMachine.container.frame.width / 2 - timelineChart.container.frame.width / 2; + timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2; timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration; - timelineChart.initialize(1, key, botsPanel, finalSteps); + timelineChart.initialize(1, key, productsPanel, finalSteps); iteration++; function finalSteps() { - timeMachine.charts.push(timelineChart); + thisObject.charts.push(timelineChart); controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined); timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime); } - } - } - - - } function draw() { @@ -127,22 +120,17 @@ function newTimeMachine() { /* When we draw a time machine, that means also to draw all the charts in it. */ - for (var i = 0; i < this.charts.length; i++) { + for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i]; chart.draw(); } - - this.controlPanel.draw(); - - botsPanel.draw(); - } function getContainer(point) { - var container; + let container; /* First we check if this point is inside this space. */ @@ -150,25 +138,7 @@ function newTimeMachine() { /* Now we see which is the inner most container that has it */ - container = this.controlPanel.getContainer(point); - - if (container !== undefined) { - - /* We found an inner container which has the point. We return it. */ - - return container; - } - - container = botsPanel.getContainer(point); - - if (container !== undefined) { - - /* We found an inner container which has the point. We return it. */ - - return container; - } - - for (var i = 0; i < this.charts.length; i++) { + for (let i = 0; i < this.charts.length; i++) { container = this.charts[i].getContainer(point); @@ -190,7 +160,5 @@ function newTimeMachine() { return undefined; } - } - } \ No newline at end of file diff --git a/index.html b/index.html index b1de88db8..2a3f76151 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,6 @@ - - @@ -67,10 +65,12 @@ - + + +