diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js index 34eb7516d..8a262e2b8 100644 --- a/ChartingSpace/TimeMachine.js +++ b/ChartingSpace/TimeMachine.js @@ -603,12 +603,12 @@ function newTimeMachine () { if (description !== undefined) { label = description } - printLabel(label, position.x + 15, position.y - 10, opacity, fontSize) + printLabel(label, position.x + 20, position.y - 10, opacity, fontSize) if (icon !== undefined) { if (icon.canDrawIcon === true) { browserCanvasContext.drawImage( - icon, position.x - 0, + icon, position.x + 5, position.y - 22, imageSize, imageSize) @@ -637,6 +637,8 @@ function newTimeMachine () { } } + drawTab(0, 0, exchangeMarkets.size * 40, 90, thisObject.container) + const INTER_EXCHANGE_SPACE = 60 const INTER_MARKET_SPACE = -100 @@ -653,14 +655,14 @@ function newTimeMachine () { if (icon.canDrawIcon === true) { browserCanvasContext.drawImage( icon, - -15 + xOffSet, + -20 + xOffSet, -43, imageSize, imageSize) } } - printLabel(exchangeMarket.exchangeName, -0 + xOffSet, -30, opacity, fontSize) + printLabel(exchangeMarket.exchangeName, -5 + xOffSet, -30, opacity, fontSize, UI_COLOR.GREY) position.x = position.x + INTER_EXCHANGE_SPACE @@ -676,7 +678,7 @@ function newTimeMachine () { } } - printLabel(exchangeMarket.marketName, -5 + xOffSet, -10, opacity, fontSize) + printLabel(exchangeMarket.marketName, -5 + xOffSet, -10, opacity, fontSize, UI_COLOR.GREY) icon = exchangeMarket.quotedAssetIcon if (icon !== undefined) { @@ -694,6 +696,53 @@ function newTimeMachine () { browserCanvasContext.restore() }) + + function drawTab (x, y, width, height, container) { + const GRADIENT = 0 + const X_OFFSET = -3 + const Y_OFFSET = 13 + const TAB_CORNERS_RADIUS = 5 + + let point = { + x: x, + y: y + } + point = transformThisPoint(point, container) + + let point1 = { + x: point.x + X_OFFSET, + y: point.y + Y_OFFSET + } + + let point2 = { + x: point.x + X_OFFSET, + y: point.y + height + Y_OFFSET + } + + let point3 = { + x: point.x - width + X_OFFSET, + y: point.y + height - GRADIENT + Y_OFFSET + } + + let point4 = { + x: point.x - width + X_OFFSET, + y: point.y + GRADIENT + Y_OFFSET + } + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.arc(point3.x, point3.y - TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI) + // browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.arc(point4.x, point4.y + TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.closePath() + browserCanvasContext.lineWidth = 1 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + '' + browserCanvasContext.stroke() + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + '' + browserCanvasContext.fill() + } } function recalculateCoordinateSystem () {