diff --git a/BottomSpace/BreakpointsBar.js b/BottomSpace/BreakpointsBar.js deleted file mode 100644 index 6d122ca30..000000000 --- a/BottomSpace/BreakpointsBar.js +++ /dev/null @@ -1,88 +0,0 @@ - -function newBreakpointsBar() { - - var thisObject = { - container: undefined, - draw: draw, - 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.frame.width = browserCanvasContext.width; - thisObject.container.frame.height = 15; - - container.frame.position.x = 0; - container.frame.position.y = 0; - - container.isDraggeable = false; - container.isClickeable = true; - - let logo; - let canDrawLogo = false; - - let datetime; - let timePeriod; - - return thisObject; - - function initialize() { - - viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged); - timePeriod = INITIAL_TIME_PERIOD; - - } - - function onZoomChanged(event) { - - timePeriod = recalculatePeriod(event.newLevel); - - } - - function setDatetime(pDatetime) { - - datetime = new Date(pDatetime); - } - - function getContainer(point) { - - let container; - - /* First we check if this point is inside this object UI. */ - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - - return this.container; - - } else { - - /* This point does not belong to this space. */ - - return undefined; - } - - } - - function draw() { - - let opacity = 1; - - browserCanvasContext.beginPath(); - - let zeroPoint = { - x: 0, - y: 0 - }; - - zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint); - - let breakpointsHeight = 15; - - browserCanvasContext.closePath(); - - browserCanvasContext.fill(); - } -} \ No newline at end of file diff --git a/BreakpointsBar.js b/BreakpointsBar.js new file mode 100644 index 000000000..7107b24d1 --- /dev/null +++ b/BreakpointsBar.js @@ -0,0 +1,219 @@ + +function newBreakpointsBar() { + + var thisObject = { + setDatetime: setDatetime, + container: undefined, + draw: draw, + 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.frame.width = browserCanvasContext.width; + thisObject.container.frame.height = 15; + + container.frame.position.x = 0; + container.frame.position.y = viewPort.visibleArea.bottomRight.y; + + container.isDraggeable = false; + container.isClickeable = true; + + let logo; + let canDrawLogo = false; + + let datetime; + let timePeriod; + let timeLineCoordinateSystem; + let chartContainer; + + let breakpointsByTimePeriod = new Map(); + + return thisObject; + + function initialize(pChartContainer, pTimeLineCoordinateSystem) { + + timeLineCoordinateSystem = pTimeLineCoordinateSystem; + chartContainer = pChartContainer; + + viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged); + timePeriod = INITIAL_TIME_PERIOD; + + thisObject.container.eventHandler.listenToEvent("onMouseClick", onClick); + + for (let i = 0; i < marketFilesPeriods.length; i++) { + + let breakpointsMap = new Map(); + breakpointsByTimePeriod.set(marketFilesPeriods[i][0], breakpointsMap); + + } + + for (let i = 0; i < dailyFilePeriods.length; i++) { + + let breakpointsMap = new Map(); + breakpointsByTimePeriod.set(dailyFilePeriods[i][0], breakpointsMap); + + } + } + + function onClick(pPoint) { + + let point = { + x: pPoint.x, + y: pPoint.y + }; + + let miliSeconds = getMilisecondsFromPoint(point, chartContainer, timeLineCoordinateSystem); + + miliSeconds = normalizeX(miliSeconds); // We are now exactly at the middle of the "candle" correspondind to the point clicked. + + let breakpointsMap = breakpointsByTimePeriod.get(timePeriod); + let breakpoint = breakpointsMap.get(miliSeconds); + + if (breakpoint === undefined) { + + /* The breakpoint didnt exist, then we create one. */ + breakpointsMap.set(miliSeconds, 1); + + } else { + + /* The breakpoint existed, so we remove it. */ + breakpointsMap.set(miliSeconds, undefined); + + } + } + + function normalizeX(pX) { + + return Math.trunc(pX / timePeriod) * timePeriod + timePeriod / 2; + + } + + function onZoomChanged(event) { + + timePeriod = recalculatePeriod(event.newLevel); + + } + + function setDatetime(pDatetime) { + + datetime = new Date(pDatetime); + } + + function getContainer(point) { + + let container; + + /* First we check if this point is inside this object UI. */ + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + + return this.container; + + } else { + + /* This point does not belong to this space. */ + + return undefined; + } + + } + + function draw() { + + /* + To draw the breakpoints, we will calculate the miliseconds for the first x pixel of the breakpoint bar, and for the last x pixel. Once we have that + we can create an array with all the possible points for breack points. Finally we can see if brealpoints exists at those points. We plot only the ones + that exists. + */ + + let breakpointsMap = breakpointsByTimePeriod.get(timePeriod); + + let beginX = { + x: viewPort.visibleArea.bottomLeft.x, + y: 0 + }; + + let endX = { + x: viewPort.visibleArea.bottomRight.x, + y: 0 + }; + + let beginMiliseconds = getMilisecondsFromPoint(beginX, chartContainer, timeLineCoordinateSystem); + let endMiliseconds = getMilisecondsFromPoint(endX, chartContainer, timeLineCoordinateSystem); + + beginMiliseconds = normalizeX(beginMiliseconds); + endMiliseconds = normalizeX(endMiliseconds); + + AT_BREAKPOINT = false; + + for (let miliSeconds = beginMiliseconds; miliSeconds < endMiliseconds; miliSeconds = miliSeconds + timePeriod) { + + let breakpoint = breakpointsMap.get(miliSeconds); + + if (breakpoint !== undefined) { + + let point1 = { + x: miliSeconds, + y: 0 + } + + point1 = timeLineCoordinateSystem.transformThisPoint(point1); + point1 = transformThisPoint(point1, chartContainer); + + let point2 = { + x: miliSeconds, + y: thisObject.container.frame.height / 2 + 1 + } + + point2 = thisObject.container.frame.frameThisPoint(point2); + + let point = { + x: point1.x, + y: point2.y + } + + let isCurrentRecord = false; + + if (datetime !== undefined) { + let dateValue = datetime.valueOf(); + if (dateValue >= miliSeconds - timePeriod / 2 && dateValue <= miliSeconds + timePeriod / 2 - 1) { + isCurrentRecord = true; + } + } + + let radius = 5; + + let opacity = '0.5'; + + browserCanvasContext.lineWidth = 1; + + /* Outer Circle */ + + browserCanvasContext.beginPath(); + + browserCanvasContext.strokeStyle = 'rgba(123, 50, 40, ' + opacity + ')'; + + if (isCurrentRecord === false) { + browserCanvasContext.fillStyle = 'rgba(223, 70, 60, ' + opacity + ')'; + } else { + browserCanvasContext.fillStyle = 'rgba(255, 233, 31, ' + opacity + ')'; /* highlight the current record */ + + AT_BREAKPOINT = true; // We are hitting a breakpoint! + } + + browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true); + browserCanvasContext.closePath(); + + if (point.x < viewPort.visibleArea.topLeft.x + 50 || point.x > viewPort.visibleArea.bottomRight.x - 50) {/*we leave this history without fill. */ } else { + browserCanvasContext.fill(); + } + + browserCanvasContext.stroke(); + } + } + } +} \ No newline at end of file diff --git a/Canvas.js b/Canvas.js index 46d9d4692..f2b795000 100644 --- a/Canvas.js +++ b/Canvas.js @@ -316,7 +316,7 @@ function newCanvas() { if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', event); + container.eventHandler.raiseEvent('onMouseClick', point); return; } @@ -326,7 +326,7 @@ function newCanvas() { if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', event); + container.eventHandler.raiseEvent('onMouseClick', point); return; } @@ -336,7 +336,7 @@ function newCanvas() { if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', event); + container.eventHandler.raiseEvent('onMouseClick', point); return; } @@ -357,7 +357,7 @@ function newCanvas() { if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', event); + container.eventHandler.raiseEvent('onMouseClick', point); return; } } diff --git a/ChartGrid.js b/ChartGrid.js index 4e24c2866..3b59941a5 100644 --- a/ChartGrid.js +++ b/ChartGrid.js @@ -1,12 +1,10 @@ function newChartGrid() { - - - var chartGrid = { + let thisObject = { draw: draw }; - return chartGrid; + return thisObject; function draw(container, timeLineCoordinateSystem) { diff --git a/Dashboard.js b/Dashboard.js index 549d6f985..68692edc3 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -123,6 +123,7 @@ function convertTimePeriodToName(pTimePeriod) { } let cloudVM = newCloudVM(); +let AT_BREAKPOINT = false; const DEBUG_START_UP_DELAY = 0 //3000; // This is a waiting time in case there is a need to debug the very first steps of initialization, to be able to hit F12 on time. const INITIAL_DEFAULT_MARKET = 2; // This is the market that will be shown when loading the site for the first time. @@ -166,7 +167,7 @@ let INITIAL_ZOOM_LEVEL = -26; // This is the zoom level at the view port i let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. const TOP_SPACE_HEIGHT = 50; -const BOTTOM_SPACE_HEIGHT = 65; +const BOTTOM_SPACE_HEIGHT = 50; var viewPort = newViewPort(); diff --git a/Files/FileCursor.js b/Files/FileCursor.js index 335533075..f996cff5d 100644 --- a/Files/FileCursor.js +++ b/Files/FileCursor.js @@ -2,7 +2,7 @@ function newFileCursor() { const MODULE_NAME = "File Cursor"; - const INFO_LOG = true; + const INFO_LOG = false; const ERROR_LOG = true; const logger = newWebDebugLog(); logger.fileName = MODULE_NAME; diff --git a/Project.njsproj b/Project.njsproj index 984467d4f..5666a0e54 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -34,7 +34,7 @@ - + Code diff --git a/Scripts/AppLoader.js b/Scripts/AppLoader.js index 013101c25..456124e35 100644 --- a/Scripts/AppLoader.js +++ b/Scripts/AppLoader.js @@ -21,7 +21,7 @@ /* PlotterPanels */ - "BottomSpace/BreakpointsBar.js", + "TopSpace/PlayStopButton.js", "TopSpace/CompanyLogo.js", @@ -60,6 +60,7 @@ "CloudVM/WebFS.js", "CloudVM/CloudVM.js", + "BreakpointsBar.js", "WebDebugLog.js", "Plotter.js", "PlotterPanel.js", diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index dedb8b6ed..a5fee795d 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -5,7 +5,6 @@ function newBottomSpace() { container: undefined, draw: draw, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - breakpointsBar: undefined, initialize: initialize }; @@ -25,8 +24,7 @@ function newBottomSpace() { function initialize() { - thisObject.breakpointsBar = newBreakpointsBar(); - thisObject.breakpointsBar.initialize(); + } @@ -34,8 +32,7 @@ function newBottomSpace() { let container; - container = thisObject.breakpointsBar.getContainer(point); - if (container !== undefined) { return container; } + /* The point does not belong to any inner container, so we return the current container. */ @@ -48,7 +45,7 @@ function newBottomSpace() { thisObject.container.frame.draw(false, false); drawBackground(); - thisObject.breakpointsBar.draw(); + } function drawBackground() { diff --git a/TimelineChart.js b/TimelineChart.js index 5df6cad4a..05b891c54 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -36,6 +36,7 @@ let level; let chartGrid; + let breakpointsBar; let initializationReady = false; @@ -63,6 +64,8 @@ exchangeId = exchange; chartGrid = newChartGrid(); + breakpointsBar = newBreakpointsBar(); + breakpointsBar.initialize(container, timeLineCoordinateSystem); recalculateScale(); @@ -748,6 +751,8 @@ competitionPlotter.plotter.setDatetime(datetime); } + + breakpointsBar.setDatetime(pDatetime); } } @@ -808,6 +813,8 @@ } + breakpointsBar.setDatetime(datetime); + thisObject.container.eventHandler.raiseEvent("Datetime Changed", datetime); } @@ -818,18 +825,9 @@ let container; - /* First we check if this point is inside this space. */ + container = breakpointsBar.getContainer(point); - if (this.container.frame.isThisPointHere(point) === true) { - - // return this.container; Currently there is a BUG in which if this is enabled the datetime of the control panel is not recalculated. - - } else { - - /* This point does not belong to this space. */ - - return undefined; - } + return container; } @@ -911,6 +909,8 @@ let competitionPlotter = competitionPlotters[i]; competitionPlotter.plotter.draw(); } + + breakpointsBar.draw(); } } diff --git a/ViewPort.js b/ViewPort.js index 0669caf5c..53242a218 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -5,7 +5,7 @@ function newViewPort() { let ANIMATION_INCREMENT = 0.25; const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT; - const BOTTOM_MARGIN = BOTTOM_SPACE_HEIGHT; + const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT; const LEFT_MARGIN = 50; const RIGHT_MARGIN = 50;