diff --git a/Canvas.js b/Canvas.js index 8ef7e6bf9..761054077 100644 --- a/Canvas.js +++ b/Canvas.js @@ -159,13 +159,13 @@ function newCanvas () { /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.start(onStart) diff --git a/ChartUtilities.js b/ChartUtilities.js index 6a2c91389..e7d29bd8a 100644 --- a/ChartUtilities.js +++ b/ChartUtilities.js @@ -139,4 +139,5 @@ function recalculatePeriod (zoomLevel) { if (zoomLevel <= -28) { return ONE_DAY_IN_MILISECONDS } + return ONE_DAY_IN_MILISECONDS } diff --git a/Container.js b/Container.js index 442957f08..8ea75ce14 100644 --- a/Container.js +++ b/Container.js @@ -45,6 +45,7 @@ function newContainer () { thisObject.parentContainer = parentContainer thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -74,6 +75,10 @@ function newContainer () { thisObject.eventHandler.raiseEvent('onMouseOver', event) } + function onMouseNotOver (event) { + thisObject.eventHandler.raiseEvent('onMouseNotOver', event) + } + function isForThisPurpose (purpose) { if (purpose !== undefined) { switch (purpose) { diff --git a/Dashboard.js b/Dashboard.js index 1adcdea84..dcc28e5c4 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -2,8 +2,6 @@ let canvas let markets let ecosystem = newEcosystem() -let INITIAL_ZOOM_LEVEL = -26 // This is the zoom level at the view port in which the APP starts. -let INITIAL_TIME_PERIOD = recalculatePeriod(MIN_ZOOM_LEVEL) // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. let viewPort = newViewPort() function newDashboard () { diff --git a/Frame.js b/Frame.js index 93a4627e0..a2a541bef 100644 --- a/Frame.js +++ b/Frame.js @@ -397,6 +397,11 @@ function newFrame () { function borders () { /* Lest get the important points of the drawing so as to apply the needed transformations. */ + let point1 + let point2 + let point3 + let point4 + point1 = { x: 0, y: 0 diff --git a/Globals.js b/Globals.js index 61cd669b2..30c706c36 100644 --- a/Globals.js +++ b/Globals.js @@ -117,6 +117,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; + + const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5; @@ -143,7 +145,16 @@ const _3_MINUTES_IN_MILISECONDS = 3 * 60 * 1000; const _2_MINUTES_IN_MILISECONDS = 2 * 60 * 1000; const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000; -const EARLIEST_DATE = new Date(2014, 0, 18, 4, 26, 8); +let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. +let INITIAL_ZOOM_LEVEL = -28.25 // This is the zoom level at the view port in which the APP starts. +let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. + +let maxDate = new Date(); +maxDate.setMilliseconds(0); +maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that projects data into the future. + +const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); +const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; const BOTTOM_SPACE_HEIGHT = 35; @@ -167,13 +178,9 @@ const PERIOD_10_MIN = "10-min"; const PERIOD_05_MIN = "05-min"; const PERIOD_01_MIN = "01-min"; -let INITIAL_DATE = new Date(); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. -var maxDate = new Date(); -maxDate.setMilliseconds(0); -maxDate.setDate(maxDate.getDate() + 10); -const MAX_PLOTABLE_DATE = maxDate; + /* We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space. diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index a6c97f8a5..08822bb7c 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -81,7 +81,7 @@ if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { let product = bot.products[k] - + if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } /* Now we create Product objects */ let productCard = newProductCard() diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index 2a1448e4e..7a1b51e8e 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -37,7 +37,7 @@ function newTimeControlPanel () { panelTabButton.container.frame.parentFrame = thisObject.container.frame panelTabButton.initialize() - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE let datetimeDisplay = { currentDatetime: datetime, @@ -92,6 +92,7 @@ function newTimeControlPanel () { } function draw () { + return thisObject.container.frame.draw(false, false, true) thisObject.datetimeDisplay.draw() panelTabButton.draw() diff --git a/PlottersManager.js b/PlottersManager.js index b73fbc704..f868af859 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -10,7 +10,7 @@ function newPlottersManager () { let competitionPlotters = [] let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE let thisObject = { setDatetime: setDatetime, @@ -476,7 +476,7 @@ function newPlottersManager () { if (INFO_LOG === true) { logger.write('[INFO] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> key = ' + pProductCard.product.plotter.devTeam + '-' + pProductCard.product.plotter.codeName + '-' + pProductCard.product.plotter.moduleName) } try { - // plotter.positionAtDatetime(INITIAL_DATE); + // plotter.positionAtDatetime(NEW_SESSION_INITIAL_DATE); } catch (err) { // If the plotter does not implement this function its ok. } diff --git a/ProductCard.js b/ProductCard.js index 0dcdbd59c..15bdff06a 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -70,7 +70,7 @@ function newProductCard () { } let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE /* TODO We are in a transition period in which bots and teams images might be located at different places. What we are going to do then is to try to load them from both places and use the variable that finally gets an diff --git a/ProductStorage.js b/ProductStorage.js index 93bc938fd..66c3ea939 100644 --- a/ProductStorage.js +++ b/ProductStorage.js @@ -186,7 +186,8 @@ function newProductStorage (pName) { let event = { totalValue: pCaller.getExpectedFiles(), - currentValue: pCaller.getFilesLoaded() + currentValue: pCaller.getFilesLoaded(), + filesNotLoaded: pCaller.getFilesNotLoaded() } thisObject.eventHandler.raiseEvent('Market File Loaded', event) @@ -194,7 +195,7 @@ function newProductStorage (pName) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> event.currentValue = ' + event.currentValue) } if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> event.totalValue = ' + event.totalValue) } - if (event.currentValue === event.totalValue) { + if (event.currentValue + event.filesNotLoaded === event.totalValue) { dataSetsLoaded++ if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> dataSetsLoaded = ' + dataSetsLoaded) } @@ -424,4 +425,3 @@ function newProductStorage (pName) { } } } - diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js deleted file mode 100644 index 3ceb3bd35..000000000 --- a/Scales/ChartGrid.js +++ /dev/null @@ -1,713 +0,0 @@ - function newChartGrid () { - let thisObject = { - container: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize - } - - let container = newContainer() - container.initialize() - thisObject.container = container - - thisObject.container.frame.width = 0 - thisObject.container.frame.height = 0 - - container.frame.position.x = 0 - container.frame.position.y = 0 - - container.isDraggeable = false - container.isClickeable = true - - return thisObject - - function initialize () { - - } - - function getContainer (point) { - let container - - container = rigthScale.getContainer(point) - - if (container !== undefined) { - return container - } - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ - - return undefined - } - } - - function draw (container, timeLineCoordinateSystem) { - return // not for now - - rightScaleBackground() - leftScaleBackground() - - let periods = [] - let boxes = [] - let labels = [] - - const basePeriod = { - x: 8 * 60 * 60 * 1000, - y: timeLineCoordinateSystem.max.y / 1000 - } - - let period = { - x: basePeriod.x, - y: basePeriod.y - } - - calculateTimeLabels() - printLabels(1000, 10000) - - function calculateTimeLabels () { - periods.push(period) // 0 - - period = { - x: basePeriod.x / 8, - y: basePeriod.y / 10 - } - - periods.push(period) // 1 - - period = { - x: basePeriod.x / 8 / 6, - y: basePeriod.y / 100 - } - - periods.push(period) // 2 - - period = { - x: basePeriod.x * 3, - y: basePeriod.y * 10 - } - - periods.push(period) // 3 - - period = { - x: basePeriod.x * 3 * 7, - y: basePeriod.y * 100 - } - - periods.push(period) // 4 - - /* Period #2 Plotting */ - - boxes = [] - plotGrid(periods[2]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('0') - break - } - case Math.trunc(1 / 6 * 1000): { - - } - labels.push('10') - break - case Math.trunc(2 / 6 * 1000): { - - } - labels.push('20') - break - - case Math.trunc(3 / 6 * 1000): { - - } - labels.push('30') - break - - case Math.trunc(4 / 6 * 1000): { - - } - labels.push('40') - break - - case Math.trunc(5 / 6 * 1000): { - - } - labels.push('50') - break - - } - } - - printLabels(1, 150) - - /* Period #1 Plotting */ - - boxes = [] - plotGrid(periods[1]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 3 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('0 Hs') - break - } - case Math.trunc(1 / 24 * 1000): { - - } - labels.push('1 Hs') - break - case Math.trunc(2 / 24 * 1000): { - - } - labels.push('2 Hs') - break - - case Math.trunc(3 / 24 * 1000): { - - } - labels.push('3 Hs') - break - - case Math.trunc(4 / 24 * 1000): { - - } - labels.push('4 Hs') - break - - case Math.trunc(5 / 24 * 1000): { - - } - labels.push('5 Hs') - break - - case Math.trunc(6 / 24 * 1000): { - - } - labels.push('6 Hs') - break - - case Math.trunc(7 / 24 * 1000): { - - } - labels.push('7 Hs') - break - - case Math.trunc(8 / 24 * 1000): { - - } - labels.push('8 Hs') - break - - case Math.trunc(9 / 24 * 1000): { - - } - labels.push('9 Hs') - break - - case Math.trunc(10 / 24 * 1000): { - - } - labels.push('10 Hs') - break - - case Math.trunc(11 / 24 * 1000): { - - } - labels.push('11 Hs') - break - - case Math.trunc(12 / 24 * 1000): { - - } - labels.push('12 Hs') - break - - case Math.trunc(13 / 24 * 1000): { - - } - labels.push('13 Hs') - break - - case Math.trunc(14 / 24 * 1000): { - - } - labels.push('14 Hs') - break - - case Math.trunc(15 / 24 * 1000): { - - } - labels.push('15 Hs') - break - - case Math.trunc(16 / 24 * 1000): { - - } - labels.push('16 Hs') - break - - case Math.trunc(17 / 24 * 1000): { - - } - labels.push('17 Hs') - break - - case Math.trunc(18 / 24 * 1000): { - - } - labels.push('18 Hs') - break - - case Math.trunc(19 / 24 * 1000): { - - } - labels.push('19 Hs') - break - - case Math.trunc(20 / 24 * 1000): { - - } - labels.push('20 Hs') - break - - case Math.trunc(21 / 24 * 1000): { - - } - labels.push('21 Hs') - break - - case Math.trunc(22 / 24 * 1000): { - - } - labels.push('22 Hs') - break - - case Math.trunc(23 / 24 * 1000): { - - } - labels.push('23 Hs') - break - } - } - - printLabels(5, 250) - - /* Period #0 Plotting */ - - boxes = [] - plotGrid(periods[0]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 3 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('Morning') - break - } - case Math.trunc(1 / 3 * 1000): { - - } - labels.push('Afternoon') - break - case Math.trunc(2 / 3 * 1000): { - - } - labels.push('Evening') - break - } - } - - printLabels(15, 50) - - /* Period #3 Plotting */ - - boxes = [] - plotGrid(periods[3]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - let date = new Date(currentValue.x) - - labels.push(date.toDateString()) - } - - printLabels(100, 2250) - - /* Period #4 Plotting */ - - boxes = [] - plotGrid(periods[4]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - let date = new Date(currentValue.x) - - var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - - labels.push(monthNames[date.getMonth()] + ' ' + date.getFullYear()) - } - } - - function plotGrid (period) { - return - - let periodWidth = period.x - let periodHeight = period.y - - let visiblePoint1 = { - x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.bottomLeft.y - } - - visiblePoint1 = unTransformThisPoint(visiblePoint1, container) - visiblePoint1 = timeLineCoordinateSystem.unInverseTransform(visiblePoint1, container.frame.height) - - let visiblePoint2 = { - x: viewPort.visibleArea.bottomRight.x, - y: viewPort.visibleArea.topRight.y - } - - visiblePoint2 = unTransformThisPoint(visiblePoint2, container) - visiblePoint2 = timeLineCoordinateSystem.unInverseTransform(visiblePoint2, container.frame.height) - - startingPoint = { - x: Math.trunc(visiblePoint1.x / periodWidth) * periodWidth, - y: Math.round(Math.trunc(visiblePoint1.y / periodHeight) * periodHeight * 100000) / 100000 - } - - endingPoint = { - x: Math.trunc(visiblePoint2.x / periodWidth) * periodWidth, - y: Math.trunc(visiblePoint2.y / periodHeight) * periodHeight - } - - let lineWidth - - if (viewPort.zoomLevel > 0) { - lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 20 - } else { - lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 80 - } - - if (lineWidth < 0.7) { - return - } - - if (lineWidth > 1.4) { - lineWidth = 1.4 - } - - browserCanvasContext.beginPath() - - let y1 - let y2 - - let lastRightLabelPosition = { - x: 0, - y: 0 - } - - let lastLeftLabelPosition = { - x: 0, - y: 0 - } - - for (var j = startingPoint.y; j <= endingPoint.y + periodHeight; j = j + periodHeight) { - if (j >= 0 && j <= timeLineCoordinateSystem.max.y) { - let point1 = { - x: visiblePoint1.x, - y: j - } - - let point2 = { - x: visiblePoint2.x, - y: j - } - - point1 = timeLineCoordinateSystem.transformThisPoint(point1) - point2 = timeLineCoordinateSystem.transformThisPoint(point2) - - point1 = transformThisPoint(point1, container) - point2 = transformThisPoint(point2, container) - - if (point1.y >= viewPort.visibleArea.topLeft.y) { - /* Here we keep the last two positive valued of y */ - - y2 = y1 - y1 = point1.y - } - - point1 = viewPort.fitIntoVisibleArea(point1) - point2 = viewPort.fitIntoVisibleArea(point2) - - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - - /* Now we put the scale on the right side of the chart */ - - drawRigthScale() - drawLeftScale() - - function drawRigthScale () { - /* And now the scale. */ - - let fontSize = 10 - - let label = ' ' + Math.round(j * 1) / 1 - label = Number(label).toLocaleString() - - let labelPoint = { - x: viewPort.visibleArea.bottomRight.x + 5, - y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO - } - - if (Math.abs(lastRightLabelPosition.y - labelPoint.y > fontSize || lastRightLabelPosition.y === 0)) { - if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } - - lastRightLabelPosition.x = labelPoint.x - lastRightLabelPosition.y = labelPoint.y - } - - function drawLeftScale () { - let fontSize = 10 - - /* - j is a value between 0 and the max y on the scale of the products. - If we want to convert j to the scale of profits we need to apply the following formula: - */ - - let labelValue = (j - timeLineCoordinateSystem.max.y / 2) * 200 / timeLineCoordinateSystem.max.y - labelValue = Math.round(labelValue * 100) / 100 - if (labelValue > 0) { labelValue = '+' + labelValue } - if (parseInt(labelValue) > -10 && parseInt(labelValue) < 10) { labelValue = ' ' + labelValue } - if (parseInt(labelValue) === 0) { labelValue = ' ' + labelValue } - let label = ' ' + pad(labelValue, 3) + '%' - - let labelPoint = { - x: 0, - y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO - } - - if (Math.abs(lastLeftLabelPosition.y - labelPoint.y > fontSize || lastLeftLabelPosition.y === 0)) { - if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } - - lastLeftLabelPosition.x = labelPoint.x - lastLeftLabelPosition.y = labelPoint.y - } - } - } - - let x1 - let x2 - - for (var i = startingPoint.x; i <= endingPoint.x + periodWidth; i = i + periodWidth) { - let point3 = { - x: i, - y: 0 - } - - let point4 = { - x: i, - y: timeLineCoordinateSystem.max.y - } - - point3 = timeLineCoordinateSystem.transformThisPoint(point3) - point4 = timeLineCoordinateSystem.transformThisPoint(point4) - - point3 = transformThisPoint(point3, container) - point4 = transformThisPoint(point4, container) - - /* Here we keep the last two positive valued of y */ - - x2 = x1 - x1 = point3.x - - if (x2 !== undefined) { - let topLeft = { - x: x2, - y: y1 - } - - let bottomRight = { - x: x1, - y: y2 - } - - let box = { - topLeft: topLeft, - bottomRight: bottomRight - } - boxes.push(box) - } - - /* Painting the lines */ - - point3 = viewPort.fitIntoVisibleArea(point3) - point4 = viewPort.fitIntoVisibleArea(point4) - - browserCanvasContext.moveTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - } - - browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.05' + Math.trunc(lineWidth + 1) + ')' - - browserCanvasContext.lineWidth = lineWidth - - browserCanvasContext.stroke() - } - - function printLabels (baseZoomFilter, maxZoom) { - let zoomFilter = viewPort.zoomFontSize(baseZoomFilter) - - if (zoomFilter < 7 || zoomFilter > maxZoom) { - return - } - - for (let i = 0; i < boxes.length; i++) { - let label = labels[i] - - if (label === undefined) { - label = 'undefined' - } - - let fontSize = 10 - - let labelPoint = { - x: boxes[i].topLeft.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: viewPort.visibleArea.topLeft.y - fontSize / 2 + 1 - } - - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(labelPoint.x, labelPoint.y - fontSize, xOffset * 2, fontSize) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fill() - - browserCanvasContext.closePath() - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.beginPath() - browserCanvasContext.rect(0, TOP_SPACE_HEIGHT, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT) - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, TOP_SPACE_HEIGHT, 500, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT) - browserCanvasContext.closePath() - browserCanvasContext.fill() - } - - function rightScaleBackground () { - const RIGHT_MARGIN = 50 - - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - - function leftScaleBackground () { - const LEFT_MARGIN = 50 - - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(0, viewPort.visibleArea.topRight.y, LEFT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - } - } diff --git a/Scales/RateScale.js b/Scales/RateScale.js new file mode 100644 index 000000000..670128339 --- /dev/null +++ b/Scales/RateScale.js @@ -0,0 +1,216 @@ +function newRateScale () { + const MODULE_NAME = 'Right Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize, + heightPercentage: 100 + } + + const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 + const STEP_SIZE = 5 + const MIN_WIDTH = 50 + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.frame.width = viewPort.margins.RIGHT + thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y + + thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x + thisObject.container.frame.position.y = TOP_SPACE_HEIGHT + + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true + + let mouse = { + position: { + x: 0, + y: 0 + } + } + + let visible = false + let timeLineCoordinateSystem + + return thisObject + + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.heightPercentage) { + thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE + } else { + thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage) + } + + let event = {} + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + mouse.position.x = event.x + mouse.position.y = event.y + + visible = true + }) + + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { + visible = false + }) + } + + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { + thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE + if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE } + } else { + thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE + if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } + } + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) + } + + 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 - viewPort.margins.RIGHT + point.y = pPoint.y - thisObject.container.frame.position.y + + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { + return thisObject.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + 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. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: frame.width - frame.width / 10, + y: 0 + } + + point2 = { + x: frame.width, + y: 0 + } + + point3 = { + x: frame.width, + y: frame.height + } + + point4 = { + x: frame.width - frame.width / 10, + 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 (point2.x - point1.x < MIN_WIDTH) { + point1.x = point2.x - MIN_WIDTH + point4.x = point2.x - MIN_WIDTH + } + + /* Lets start the drawing. */ +/* + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y) + browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.lineTo(point1.x, point1.y) + 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 + + thisObject.container.frame.width = point2.x - point1.x + thisObject.container.frame.height = point3.y - point2.y + + let point = { + x: point5.x + viewPort.margins.RIGHT, + y: mouse.position.y + } + + let rate = getRateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) + + let label = rate.toFixed(2) + let fontSize = 10 + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + if (point.y + fontSize / 2 > point3.y || point.y - fontSize / 2 < point1.y) { return } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + + browserCanvasContext.fillText(label, point1.x + viewPort.margins.RIGHT, point.y + fontSize / 2) + + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point.y) + browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, point.y) + + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() + } +} diff --git a/Scales/RightScale.js b/Scales/RightScale.js deleted file mode 100644 index c88b12ceb..000000000 --- a/Scales/RightScale.js +++ /dev/null @@ -1,144 +0,0 @@ - function newRigthScale () { - const MODULE_NAME = 'Right Scale' - const INFO_LOG = false - const INTENSIVE_LOG = false - const ERROR_LOG = true - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME - - let thisObject = { - container: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize, - heightPercentage: 100 - } - - const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 - const RIGHT_MARGIN = 50 - const STEP_SIZE = 5 - - thisObject.container = newContainer() - thisObject.container.initialize(MODULE_NAME) - - thisObject.container.frame.width = RIGHT_MARGIN - thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y - - thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x - thisObject.container.frame.position.y = TOP_SPACE_HEIGHT - - thisObject.container.isDraggeable = false - thisObject.container.isClickeable = false - thisObject.container.isWheelable = true - - let mouse = { - position: { - x: 0, - y: 0 - } - } - - return thisObject - - function initialize () { - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) - - thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) - if (!thisObject.heightPercentage) { - thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE - } else { - thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage) - } - - let event = {} - event.heightPercentage = thisObject.heightPercentage - thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) - - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - mouse.position.x = event.x - mouse.position.y = event.y - }) - } - - function onMouseWheel (event) { - delta = event.wheelDelta - if (delta < 0) { - thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE - if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE } - } else { - thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE - if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } - } - event.heightPercentage = thisObject.heightPercentage - thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) - - window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) - } - - 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 thisObject.container - } else { - /* This point does not belong to this space. */ - - return undefined - } - } - - function draw () { - drawBackground() - drawLabel() - } - - function drawBackground () { - const RIGHT_MARGIN = 50 - - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - - function drawLabel () { - let label = '6000' - let fontSize = 10 - - let ratePoint = { - x: 0, - y: mouse.position.y - } - - // getRateFromPoint(ratePoint) - - let labelPoint = { - x: viewPort.visibleArea.topRight.x + 5, - y: mouse.position.y - fontSize / 2 + 1 - } - - let xOffset = 0// label.length / 2 * fontSize * FONT_ASPECT_RATIO - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(labelPoint.x, labelPoint.y, xOffset * 2, fontSize) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' - browserCanvasContext.fill() - - browserCanvasContext.closePath() - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js new file mode 100644 index 000000000..cb836d04e --- /dev/null +++ b/Scales/TimePeriodScale.js @@ -0,0 +1,271 @@ +function newTimePeriodScale () { + const MODULE_NAME = 'Time Period Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize, + timePeriod: undefined + } + + const FILES_PERIOD_DEFAULT_VALUE = 0 + const TIME_PERIOD_DEFAULT_VALUE = 0 + const MIN_HEIGHT = 50 + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true + + let mouse = { + position: { + x: 0, + y: 0 + } + } + + let visible = false + let timeLineCoordinateSystem + let objectStorage = {} + let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE + let timePeriodIndex = TIME_PERIOD_DEFAULT_VALUE + let timePeriodsMasterArray = [marketFilesPeriods, dailyFilePeriods] + let timePeriodLabel = '' + + return thisObject + + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + readObjectState() + newTimePeriod() + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + mouse.position.x = event.x + mouse.position.y = event.y + + visible = true + }) + + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { + visible = false + }) + + viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) + } + + function onZoomChanged (event) { + let currentTimePeriod = thisObject.timePeriod + let timePeriod = recalculatePeriod(event.newLevel) + if (timePeriod !== currentTimePeriod) { + for (let i = 0; i < timePeriodsMasterArray.length; i++) { + let timePeriodArray = timePeriodsMasterArray[i] + for (let j = 0; j < timePeriodArray.length; j++) { + let record = timePeriodArray[j] + if (timePeriod === record[0]) { + filePeriodIndex = i + timePeriodIndex = j + } + } + } + newTimePeriod() + } + } + + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { + timePeriodIndex-- + if (timePeriodIndex < 0) { + filePeriodIndex-- + if (filePeriodIndex < 0) { + filePeriodIndex = 0 + timePeriodIndex = 0 + } else { + timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1 + } + } + } else { + timePeriodIndex++ + if (timePeriodIndex > timePeriodsMasterArray[filePeriodIndex].length - 1) { + filePeriodIndex++ + if (filePeriodIndex > timePeriodsMasterArray.length - 1) { + filePeriodIndex = timePeriodsMasterArray.length - 1 + timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1 + } else { + timePeriodIndex = 0 + } + } + } + + saveObjectState() + newTimePeriod() + } + + 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) { + return thisObject.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + 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. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: 0, + y: frame.height - frame.height / 10 + } + + point2 = { + x: frame.width, + y: frame.height - frame.height / 10 + } + + 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 - BOTTOM_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 + + let point = { + x: mouse.position.x, + y: point1.y + viewPort.margins.BOTTOM + } + + let label = timePeriodLabel + let fontSize = 10 + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + + if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + + browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 1) +/* + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point1.y) + browserCanvasContext.lineTo(point.x, point5.y) + + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() +*/ + } + + function saveObjectState () { + objectStorage.filePeriodIndex = filePeriodIndex + objectStorage.timePeriodIndex = timePeriodIndex + window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage)) + } + + function readObjectState () { + let objectStorageString = window.localStorage.getItem(MODULE_NAME) + if (objectStorageString !== null && objectStorageString !== '') { + objectStorage = JSON.parse(objectStorageString) + filePeriodIndex = objectStorage.filePeriodIndex + timePeriodIndex = objectStorage.timePeriodIndex + } + } + + function newTimePeriod () { + let timePeriodArray = timePeriodsMasterArray[filePeriodIndex] + thisObject.timePeriod = timePeriodArray[timePeriodIndex][0] + timePeriodLabel = timePeriodArray[timePeriodIndex][1] + + let event = {} + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) + } +} diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 5e8dba0f1..d994e99bc 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -14,26 +14,32 @@ function newTimeScale () { lenghtPercentage: undefined } - const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50 - const RIGHT_MARGIN = 50 + const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5 const STEP_SIZE = 5 + const MIN_HEIGHT = 50 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x - thisObject.container.frame.height = 100 - - thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x - thisObject.container.frame.position.y = TOP_SPACE_HEIGHT - thisObject.container.isDraggeable = false thisObject.container.isClickeable = false thisObject.container.isWheelable = true + let mouse = { + position: { + x: 0, + y: 0 + } + } + + let visible = false + let timeLineCoordinateSystem + return thisObject - function initialize () { + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) @@ -46,6 +52,17 @@ function newTimeScale () { let event = {} event.lenghtPercentage = thisObject.lenghtPercentage thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + mouse.position.x = event.x + mouse.position.y = event.y + + visible = true + }) + + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { + visible = false + }) } function onMouseWheel (event) { @@ -64,10 +81,16 @@ function newTimeScale () { window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage) } - function getContainer (point) { + function getContainer (pPoint) { let container - /* First we check if this point is inside this object UI. */ +/* 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 + viewPort.margins.TOP if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return thisObject.container @@ -79,6 +102,112 @@ function newTimeScale () { } 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. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: 0, + y: 0 + } + + point2 = { + x: frame.width, + y: 0 + } + + point3 = { + x: frame.width, + y: frame.height / 10 + } + + point4 = { + x: 0, + y: frame.height / 10 + } + + point5 = { + x: 0, + y: frame.height + } + + /* 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) { + point3.y = point2.y + MIN_HEIGHT + point4.y = point2.y + MIN_HEIGHT + } + + /* Lets start the drawing. */ +/* + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point2.x, point2.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point3.x, point3.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point4.x, point4.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point1.x, point1.y - viewPort.margins.TOP) + 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 + + thisObject.container.frame.width = point2.x - point1.x + thisObject.container.frame.height = point3.y - point2.y + + let point = { + x: mouse.position.x, + y: point1.y - viewPort.margins.TOP + } + + let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + date = new Date(date) + + let label = date.toUTCString() + let fontSize = 10 + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + + if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + + browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 7) + + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point1.y) + browserCanvasContext.lineTo(point.x, point5.y) + + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() } } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 5378671d2..ecd4793a2 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -98,8 +98,6 @@ function newPanelsSpace () { function draw () { thisObject.container.frame.draw(false, false) - /* When we draw a time machine, that means also to draw all the charts in it. */ - thisObject.panels = panelsMap.get('Global') if (thisObject.panels != undefined) { for (var i = 0; i < thisObject.panels.length; i++) { diff --git a/TimeMachine.js b/TimeMachine.js index 75e11f84a..d25a9aaa1 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -43,6 +43,8 @@ function newTimeMachine () { let timeScale let rigthScale + let timeLineCoordinateSystem = newTimeLineCoordinateSystem() + return thisObject function finalize () { @@ -67,6 +69,13 @@ function newTimeMachine () { controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) + recalculateScale() + + thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { + recalculateScale() + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) + }) + /* 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. @@ -74,7 +83,6 @@ function newTimeMachine () { let timelineChart = newTimelineChart() timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -82,7 +90,7 @@ function newTimeMachine () { position++ - timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized) + timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeLineCoordinateSystem, onDefaultInitialized) function onDefaultInitialized (err) { if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { @@ -98,22 +106,22 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - + timeScale.container.connectToParent(thisObject.container, false, false) timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - timeScale.initialize() - - rigthScale = newRigthScale() + timeScale.initialize(timeLineCoordinateSystem) + rigthScale = newRateScale() + rigthScale.container.connectToParent(thisObject.container, false, false) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - rigthScale.initialize() + rigthScale.initialize(timeLineCoordinateSystem) initializeTheRest() } @@ -158,7 +166,7 @@ function newTimeMachine () { position++ - timelineChart.initialize(exchange, market, finalSteps) + timelineChart.initialize(exchange, market, timeLineCoordinateSystem, finalSteps) function finalSteps () { if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> finalSteps -> Entering function.') } @@ -186,15 +194,17 @@ function newTimeMachine () { } function draw () { - // this.container.frame.draw(false, false) + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.draw() + } - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.draw() + if (timeScale !== undefined) { timeScale.draw() } + if (rigthScale !== undefined) { rigthScale.draw() } + + // thisObject.container.frame.draw(false, true, false) } - - if (timeScale !== undefined) { timeScale.draw() } - if (rigthScale !== undefined) { rigthScale.draw() } } function getContainer (point, purpose) { @@ -226,6 +236,35 @@ function newTimeMachine () { } } } - return this.container + + if (thisObject.container.frame.isThisPointHere(point) === true) { + return thisObject.container + } else { + if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { + thisObject.container.eventHandler.raiseEvent('onMouseNotOver') + } + return + } + } + + function recalculateScale () { + if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } + + let minValue = { + x: MIN_PLOTABLE_DATE.valueOf(), + y: 0 + } + + let maxValue = { + x: MAX_PLOTABLE_DATE.valueOf(), + y: nextPorwerOf10(USDT_BTC_HTH) / 4 + } + + timeLineCoordinateSystem.initialize( + minValue, + maxValue, + thisObject.container.frame.width, + thisObject.container.frame.height + ) } } diff --git a/TimelineChart.js b/TimelineChart.js index da21b21be..34e41ec8c 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -6,10 +6,10 @@ const logger = newWebDebugLog() logger.fileName = MODULE_NAME - let timeLineCoordinateSystem = newTimeLineCoordinateSystem() + let timeLineCoordinateSystem let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE let thisObject = { setDatetime: setDatetime, @@ -47,6 +47,7 @@ let market let productsPanelHandle + let timePeriodScale return thisObject @@ -60,22 +61,18 @@ } } - function initialize (pExchange, pMarket, callBackFunction) { + function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { - recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) - }) - - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) - }) - /* We load the logow we will need for the background. */ exchange = pExchange market = pMarket + timeLineCoordinateSystem = pTimeLineCoordinateSystem + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + }) let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) @@ -116,17 +113,12 @@ logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - // chartGrid = newChartGrid() - // chartGrid.initialize() - breakpointsBar = newBreakpointsBar() breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) - recalculateScale() - - moveToUserPosition(thisObject.container, timeLineCoordinateSystem) + // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) timePeriod = INITIAL_TIME_PERIOD - datetime = INITIAL_DATE + datetime = NEW_SESSION_INITIAL_DATE /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */ @@ -155,6 +147,18 @@ return } + timePeriodScale = newTimePeriodScale() + timePeriodScale.container.connectToParent(thisObject.container, false, false) + timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { + let currentTimePeriod = timePeriod + timePeriod = event.timePeriod + if (timePeriod !== currentTimePeriod) { + plotterManager.setTimePeriod(timePeriod) + } + }) + + timePeriodScale.initialize(timeLineCoordinateSystem) + initializationReady = true callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) return @@ -169,16 +173,6 @@ if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') } if (initializationReady === true) { - let currentTimePeriod = timePeriod - - timePeriod = recalculatePeriod(event.newLevel) - - /* If the period changes, we need to spread the word in cascade towards all the depending objects. */ - - if (timePeriod !== currentTimePeriod) { - plotterManager.setTimePeriod(timePeriod) - } - recalculateCurrentDatetime() // saveUserPosition(thisObject.container, timeLineCoordinateSystem) @@ -244,7 +238,7 @@ let container - // container = chartGrid.getContainer(point) + container = timePeriodScale.getContainer(point) if (container !== undefined) { return container } @@ -253,27 +247,6 @@ return container } - function recalculateScale () { - if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } - - let minValue = { - x: EARLIEST_DATE.valueOf(), - y: 0 - } - - let maxValue = { - x: MAX_PLOTABLE_DATE.valueOf(), - y: nextPorwerOf10(USDT_BTC_HTH) / 4 - } - - timeLineCoordinateSystem.initialize( - minValue, - maxValue, - thisObject.container.frame.width, - thisObject.container.frame.height - ) - } - function tooTiny () { if (INTENSIVE_LOG === true) { logger.write('[INFO] tooTiny -> Entering function.') } @@ -301,8 +274,6 @@ if (window.CHART_ON_FOCUS === '') { window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA - this.container.frame.draw() - drawChartsBackgroundImages() } } @@ -316,8 +287,8 @@ // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) + timePeriodScale.draw() plotterManager.draw() - breakpointsBar.draw() } } @@ -333,7 +304,7 @@ } let toPoint = { - x: 0, + x: thisObject.container.frame.width, y: thisObject.container.frame.height } @@ -342,7 +313,7 @@ browserCanvasContext.beginPath() - browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y) + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' browserCanvasContext.closePath() @@ -355,6 +326,23 @@ if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } + /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ + + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) + + /* Second we calculate the points for the images themselves */ + let backgroundLogoPoint1 let backgroundLogoPoint2 @@ -398,6 +386,10 @@ imagePoint = transformThisPoint(imagePoint, thisObject.container) let offSet = 0 + let imagePosition = { + x: 0, + y: 0 + } for (let j = 0; j < MAX_ROWS; j++) { if (offSet === -imageWidth * 8) { @@ -409,7 +401,17 @@ for (let i = 0; i < MAX_COLUMNS; i = i + 4) { let logo = logoA - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } @@ -425,7 +427,17 @@ for (let i = 1; i < MAX_COLUMNS; i = i + 4) { let logo = logoB - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } @@ -441,7 +453,17 @@ for (let i = 2; i < MAX_COLUMNS; i = i + 4) { let logo = logoExchange - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } @@ -457,7 +479,17 @@ for (let i = 3; i < MAX_COLUMNS; i = i + 4) { let logo = logoAA - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } } diff --git a/Utilities.js b/Utilities.js index 2ea30bde1..cffc22713 100644 --- a/Utilities.js +++ b/Utilities.js @@ -100,12 +100,15 @@ function getUserPosition (timeLineCoordinateSystem) { return userPosition } -function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center) { +function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center, considerZoom) { let userPosition = getUserPosition(timeLineCoordinateSystem) - viewPort.newZoomLevel(userPosition.zoom) + if (considerZoom === true) { + viewPort.newZoomLevel(userPosition.zoom) + } + INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom) - INITIAL_DATE = new Date(userPosition.date) + NEW_SESSION_INITIAL_DATE = new Date(userPosition.date) let targetPoint = { x: (new Date(userPosition.date)).valueOf(), @@ -150,4 +153,3 @@ function removeTime (datetime) { return dateOnly } - diff --git a/ViewPort.js b/ViewPort.js index e45fc54c8..70d4aeae1 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -1,5 +1,12 @@  function newViewPort () { + const MODULE_NAME = 'Viewport' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + const CONSOLE_LOG = true let ANIMATION_INCREMENT = 0.25 @@ -7,6 +14,12 @@ function newViewPort () { const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT const LEFT_MARGIN = 50 const RIGHT_MARGIN = 50 + const MARGINS = { + TOP: TOP_MARGIN, + BOTTOM: BOTTOM_MARGIN, + LEFT: LEFT_MARGIN, + RIGHT: RIGHT_MARGIN + } let thisObject = { visibleArea: undefined, @@ -14,6 +27,7 @@ function newViewPort () { zoomTargetLevel: undefined, zoomLevel: undefined, mousePosition: undefined, + margins: MARGINS, getDisplacement: getDisplacement, newZoomLevel: newZoomLevel, applyZoom: applyZoom, @@ -55,6 +69,8 @@ function newViewPort () { thisObject.eventHandler = newEventHandler() + let objectStorage = {} + return thisObject function initialize () { @@ -64,6 +80,8 @@ function newViewPort () { bottomRight: { x: browserCanvas.width - RIGHT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN}, bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN} } + + readObjectState() } function getDisplacement () { @@ -99,17 +117,6 @@ function newViewPort () { changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel) } - /* - if (offsetIncrement.x !== 0) { - - if (Math.trunc(Math.abs(targetOffset.x - offset.x) * 1000) >= Math.trunc(Math.abs(offsetIncrement.x) * 1000)) { - offset.x = offset.x + offsetIncrement.x; - } else { - offsetIncrement.x = 0; - } - } -*/ - if (offsetIncrement.y !== 0) { if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) { offset.y = offset.y + offsetIncrement.y @@ -125,6 +132,8 @@ function newViewPort () { offset.x = offset.x + displaceVector.x offset.y = offset.y + displaceVector.y + saveObjectState() + let event = { newOffset: offset } @@ -150,6 +159,8 @@ function newViewPort () { thisObject.zoomTargetLevel = level thisObject.zoomLevel = level + saveObjectState() + ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / 3 let event = { @@ -244,6 +255,8 @@ function newViewPort () { offset.x = offset.x - newMouse.x + thisObject.mousePosition.x offset.y = offset.y - newMouse.y + thisObject.mousePosition.y + saveObjectState() + targetOffset.x = offset.x targetOffset.y = offset.y @@ -332,22 +345,21 @@ function newViewPort () { } function draw () { -/* - drawGrid(10); - drawGrid(1); - drawGrid(0.1); -*/ + drawGrid(0.1) } function drawGrid (step) { + if (thisObject.zoomLevel > -17) { return } + let squareWidth = (thisObject.visibleArea.bottomRight.x - thisObject.visibleArea.bottomLeft.x) / step squareWidth = squareWidth + squareWidth * increment * thisObject.zoomLevel let startingX = offset.x - Math.trunc(offset.x / squareWidth) * squareWidth let startingY = offset.y - Math.trunc(offset.y / squareWidth) * squareWidth - let lineWidth = 10 / step + 10 / step * increment * thisObject.zoomLevel + let lineWidth = 0.4 + thisObject.zoomLevel / 100 + lineWidth = lineWidth.toFixed(2) - if (lineWidth < 0.5) { + if (lineWidth < 0.1) { return } @@ -357,40 +369,66 @@ function newViewPort () { browserCanvasContext.beginPath() - for (var i = startingX; i < thisObject.visibleArea.bottomRight.x; i = i + squareWidth) { - for (var j = startingY; j < thisObject.visibleArea.bottomRight.y; j = j + squareWidth) { + let CROSS_SIZE = 4 + + for (var i = startingX; i < thisObject.visibleArea.bottomRight.x + RIGHT_MARGIN; i = i + squareWidth) { + for (var j = startingY; j < thisObject.visibleArea.bottomRight.y + BOTTOM_MARGIN; j = j + squareWidth) { let point1 = { - x: thisObject.visibleArea.bottomLeft.x, - y: j + x: Math.trunc(i - CROSS_SIZE), + y: Math.trunc(j) } let point2 = { - x: thisObject.visibleArea.bottomRight.x, - y: j + x: Math.trunc(i + CROSS_SIZE), + y: Math.trunc(j) } browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) - } - let point3 = { - x: i, - y: thisObject.visibleArea.topLeft.y - } + let point3 = { + x: Math.trunc(i), + y: Math.trunc(j - CROSS_SIZE) + } - let point4 = { - x: i, - y: thisObject.visibleArea.bottomLeft.y - } + let point4 = { + x: Math.trunc(i), + y: Math.trunc(j + CROSS_SIZE) + } - browserCanvasContext.moveTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.moveTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + } } browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.' + Math.trunc(lineWidth + 1) + ')' + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)' - browserCanvasContext.lineWidth = lineWidth + browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() } + + function saveObjectState () { + objectStorage.offset = offset + objectStorage.zoomLevel = thisObject.zoomLevel + window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage)) + } + + function readObjectState () { + let objectStorageString = window.localStorage.getItem(MODULE_NAME) + if (objectStorageString !== null && objectStorageString !== '') { + objectStorage = JSON.parse(objectStorageString) + offset = objectStorage.offset + thisObject.zoomLevel = objectStorage.zoomLevel + thisObject.zoomTargetLevel = objectStorage.zoomLevel + INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel) + } else { // Setting default values for first session + offset = { + x: 0, + y: 0 + } + thisObject.zoomLevel = MIN_ZOOM_LEVEL + thisObject.zoomTargetLevel = MIN_ZOOM_LEVEL + } + } }