Small crosses at viewport

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)

TimelineChart.js

@@ -274,8 +274,6 @@
        if (window.CHART_ON_FOCUS === '') {
          window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA
 
-         this.container.frame.draw()
-
          drawChartsBackgroundImages()
        }
      }
@@ -306,7 +304,7 @@
      }
 
      let toPoint = {
-       x: 0,
+       x: thisObject.container.frame.width,
        y: thisObject.container.frame.height
      }
 
@@ -315,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()
@@ -328,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
 
@@ -371,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) {
@@ -382,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)
+         }
        }
      }
 
@@ -398,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)
+         }
        }
      }
 
@@ -414,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)
+         }
        }
      }
 
@@ -430,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)
+         }
        }
      }
    }

ViewPort.js

@@ -332,22 +332,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,39 +356,41 @@ function newViewPort () {
 
     browserCanvasContext.beginPath()
 
+    let CROSS_SIZE = 5
+
     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 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, 1)'
 
-    browserCanvasContext.lineWidth = lineWidth
+    browserCanvasContext.lineWidth = 1
 
     browserCanvasContext.stroke()
   }