Improvements on Look and Feel

CanvasApp/Canvas.js

@@ -250,6 +250,7 @@ function newCanvas () {
     thisObject.mouse.action = 'key down'
 
     checkMediaRecording(event)
+    canvas.chartingSpace.onKeyPressed(event)
 
     let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {

CanvasApp/ChartingSpace/EdgeEditor.js

@@ -5,6 +5,8 @@ function newEdgeEditor () {
     container: undefined,
     fitFunction: undefined,
     isVisible: true,
+    isMouseOver: undefined,
+    onKeyPressed: onKeyPressed,
     physics: physics,
     drawForeground: drawForeground,
     getContainer: getContainer,
@@ -22,8 +24,7 @@ function newEdgeEditor () {
   thisObject.container.isWheelable = false
   thisObject.container.detectMouseOver = true
 
-  let buttonUsedForDragging
-  let isMouseOver
+  let whatHappened
   let whereIsMouseOver = 'outside'
 
   let coordinateSystem
@@ -60,7 +61,7 @@ function newEdgeEditor () {
   }
 
   function onMouseOver (event) {
-    isMouseOver = true
+    thisObject.isMouseOver = true
     mouse = {
       position: {
         x: event.x,
@@ -70,25 +71,41 @@ function newEdgeEditor () {
   }
 
   function onMouseNotOver () {
-    isMouseOver = false
+    thisObject.isMouseOver = false
   }
 
   function onDragStarted (event) {
     switch (event.buttons) {
       case 1: {
-        buttonUsedForDragging = 'left mouse button'
+        whatHappened = 'left mouse button'
         if (event.shiftKey === true) {
-          buttonUsedForDragging = 'left mouse button + SHIFT'
+          whatHappened = 'left mouse button + SHIFT'
         }
         break
       }
       case 2: {
-        buttonUsedForDragging = 'right mouse button' // this will never happen as of today
+        whatHappened = 'right mouse button' // this will never happen as of today
         break
       }
     }
   }
 
+  function onKeyPressed (event) {
+    const STEP = 10
+
+    if (event.shiftKey === false && event.code === 'ArrowLeft') {
+      thisObject.container.frame.position.x = thisObject.container.frame.position.x + STEP
+      whatHappened = 'left or right arrow key pressed'
+      return
+    }
+
+    if (event.shiftKey === false && event.code === 'ArrowRight') {
+      thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP
+      whatHappened = 'left or right arrow key pressed'
+      return
+    }
+  }
+
   function getContainer (event, purpose) {
     if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.buttons !== 2) {
       let point = {
@@ -145,7 +162,7 @@ function newEdgeEditor () {
 
     switch (whereIsMouseOver) {
       case 'center': {
-        switch (buttonUsedForDragging) {
+        switch (whatHappened) {
           case 'left mouse button + SHIFT': {
             /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */
             thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
@@ -172,6 +189,21 @@ function newEdgeEditor () {
             }
             coordinateSystem.recalculateScale(event)
           }
+          case 'left or right arrow key pressed': {
+            let point = {
+              x: -dragVector.x,
+              y: 0
+            }
+            let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+            let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
+            let event = {
+              type: 'center dragged',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
+          }
         }
         thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
         break
@@ -190,7 +222,7 @@ function newEdgeEditor () {
         thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
         thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - dragVector.y
 
-        switch (buttonUsedForDragging) {
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.max.y = newMaxRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
@@ -223,7 +255,7 @@ function newEdgeEditor () {
 
         thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
 
-        switch (buttonUsedForDragging) {
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.min.y = newMinRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
@@ -256,7 +288,7 @@ function newEdgeEditor () {
         thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
         thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - dragVector.x
 
-        switch (buttonUsedForDragging) {
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.min.x = newMinDate.valueOf()
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
@@ -285,7 +317,7 @@ function newEdgeEditor () {
 
         thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
 
-        switch (buttonUsedForDragging) {
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.max.x = newMaxDate.valueOf()
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
@@ -309,7 +341,7 @@ function newEdgeEditor () {
     let edgeSize
     let lineWidth
 
-    if (whereIsMouseOver === 'outside' || isMouseOver === false) {
+    if (whereIsMouseOver === 'outside' || thisObject.isMouseOver === false) {
       edgeSize = EDGE_SIZE / 2
       lineWidth = 0.1
     } else {
@@ -462,7 +494,7 @@ function newEdgeEditor () {
     drawEdge('left')
 
     function drawEdge (edgeType) {
-      if (whereIsMouseOver === edgeType && isMouseOver === true) {
+      if (whereIsMouseOver === edgeType && thisObject.isMouseOver === true) {
         browserCanvasContext.lineWidth = lineWidth
         browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
         browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'

CanvasApp/ChartingSpace/TimeMachine.js

@@ -22,6 +22,8 @@ function newTimeMachine () {
     rateScale: undefined,
     payload: undefined,
     edgeEditor: undefined,
+    onFocus: undefined,
+    onKeyPressed: onKeyPressed,
     timelineCharts: [],
     fitFunction: fitFunction,
     physics: physics,
@@ -157,6 +159,10 @@ function newTimeMachine () {
     callBackFunction()
   }
 
+  function onKeyPressed (event) {
+    thisObject.edgeEditor.onKeyPressed(event)
+  }
+
   function onMouseOver (event) {
     drawScales = true
 
@@ -391,6 +397,15 @@ function newTimeMachine () {
       syncWithDesigner()
     }
     panelPhysics()
+    onFocusPhysics()
+  }
+
+  function onFocusPhysics () {
+    if (thisObject.edgeEditor.isMouseOver === true) {
+      thisObject.onFocus = true
+    } else {
+      thisObject.onFocus = false
+    }
   }
 
   function panelPhysics () {
@@ -540,24 +555,26 @@ function newTimeMachine () {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
       }
     } else {
-      let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-      if (icon !== undefined) {
-        if (icon.canDrawIcon === true) {
-          let imageSize = 40
-          let imagePosition = {
-            x: thisObject.container.frame.width / 2,
-            y: thisObject.container.frame.height / 2
+      if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED) {
+        let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+        if (icon !== undefined) {
+          if (icon.canDrawIcon === true) {
+            let imageSize = 40
+            let imagePosition = {
+              x: thisObject.container.frame.width / 2,
+              y: thisObject.container.frame.height / 2
+            }
+
+            imagePosition = transformThisPoint(imagePosition, thisObject.container)
+            imagePosition = thisObject.fitFunction(imagePosition, true)
+
+            browserCanvasContext.drawImage(
+               icon,
+               imagePosition.x - imageSize / 2,
+               imagePosition.y - imageSize / 2,
+               imageSize,
+               imageSize)
           }
-
-          imagePosition = transformThisPoint(imagePosition, thisObject.container)
-          imagePosition = thisObject.fitFunction(imagePosition, true)
-
-          browserCanvasContext.drawImage(
-             icon,
-             imagePosition.x - imageSize / 2,
-             imagePosition.y - imageSize / 2,
-             imageSize,
-             imageSize)
         }
       }
     }
@@ -587,23 +604,92 @@ function newTimeMachine () {
       x: 0,
       y: 0
     }
-    let imageSize = 25
-    let fontSize = 25
+    let imageSize = 13
+    let fontSize = 15
     let opacity = 1
     let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
     position = transformThisPoint(position, thisObject.container)
-    printLabel(thisObject.payload.node.name, position.x + 30, position.y - 10, opacity, fontSize)
+    printLabel(thisObject.payload.node.name, position.x + 15, position.y - 28, opacity, fontSize)
 
     if (icon !== undefined) {
       if (icon.canDrawIcon === true) {
         browserCanvasContext.drawImage(
         icon, position.x - 0,
-        position.y - 30,
+        position.y - 40,
         imageSize,
         imageSize)
       }
     }
+
+    imageSize = 13
+    fontSize = 15
+    let exchangeMarkets = new Map()
+
+    for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+      let timelinechart = thisObject.timelineCharts[i]
+      if (timelinechart.layersManager !== undefined) {
+        for (let j = 0; j < timelinechart.layersManager.layers.length; j++) {
+          let layer = timelinechart.layersManager.layers[j]
+
+          exchangeMarket = {
+            exchangeName: layer.exchange.name,
+            marketName: layer.market,
+            exchangeIcon: layer.exchangeIcon,
+            baseAssetIcon: layer.baseAssetIcon,
+            quotedAssetIcon: layer.quotedAssetIcon
+          }
+          exchangeMarkets.set(exchangeMarket.exchangeName + '-' + exchangeMarket.marketName, exchangeMarket)
+        }
+      }
+    }
+
+    const INTER_EXCHANGE_SPACE = 60
+    const INTER_MARKET_SPACE = 90
+
+    exchangeMarkets.forEach((exchangeMarket, i) => {
+      icon = exchangeMarket.exchangeIcon
+
+      if (icon !== undefined) {
+        if (icon.canDrawIcon === true) {
+          browserCanvasContext.drawImage(
+          icon, position.x - 0,
+          position.y - 22,
+          imageSize,
+          imageSize)
+        }
+      }
+
+      printLabel(exchangeMarket.exchangeName, position.x + 15, position.y - 10, opacity, fontSize)
+
+      position.x = position.x + INTER_EXCHANGE_SPACE
+
+      icon = exchangeMarket.baseAssetIcon
+      if (icon !== undefined) {
+        if (icon.canDrawIcon === true) {
+          browserCanvasContext.drawImage(
+          icon, position.x - 0,
+          position.y - 22,
+          imageSize,
+          imageSize)
+        }
+      }
+
+      printLabel(exchangeMarket.marketName, position.x + 15, position.y - 10, opacity, fontSize)
+
+      icon = exchangeMarket.quotedAssetIcon
+      if (icon !== undefined) {
+        if (icon.canDrawIcon === true) {
+          browserCanvasContext.drawImage(
+          icon, position.x + 70,
+          position.y - 22,
+          imageSize,
+          imageSize)
+        }
+      }
+
+      position.x = position.x + INTER_MARKET_SPACE
+    })
   }
 
   function recalculateCoordinateSystem () {
@@ -625,3 +711,4 @@ function newTimeMachine () {
       )
   }
 }
+

CanvasApp/Globals.js

@@ -44,7 +44,9 @@ UI_FONT = {
 const DEBUG = {}
 const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 5 // This regulates some behavious changes that happens when the user zoom out below this level.
 const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 5  // This help regulate when to change the Time Frame base on the level of zoom out.
-const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 5  
+const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 2
+const ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION = 3  
+const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED = 5 
 
 let FONT_ASPECT_RATIO = 0.32;
 

CanvasApp/Panels/Layer.js

@@ -11,6 +11,15 @@ function newLayer () {
     payload: undefined,
     definition: undefined,
     panels: undefined,
+    baseAsset: undefined,
+    quotedAsset: undefined,
+    market: undefined,
+    exchange: undefined,
+    plotterModule: undefined,
+    exchangeIcon: undefined,
+    plotterTypeIcon: undefined,
+    baseAssetIcon: undefined,
+    quotedAssetIcon: undefined,
     physics: physics,
     draw: draw,
     turnOff: turnOff,
@@ -79,6 +88,8 @@ function newLayer () {
   return thisObject
 
   function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+
     thisObject.container.finalize()
     thisObject.eventHandler.finalize()
     thisObject.container = undefined
@@ -107,7 +118,15 @@ function newLayer () {
 
     panelsVisibleButton = undefined
 
-    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+    thisObject.baseAsset = undefined
+    thisObject.quotedAsset = undefined
+    thisObject.market = undefined
+    thisObject.exchange = undefined
+    thisObject.plotterModule = undefined
+    thisObject.exchangeIcon = undefined
+    thisObject.plotterTypeIcon = undefined
+    thisObject.baseAssetIcon = undefined
+    thisObject.quotedAssetIcon = undefined
   }
 
   function initialize (callBackFunction) {
@@ -170,6 +189,41 @@ function newLayer () {
        /* Lets listen to our own events to react when we have a Mouse Click */
       onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
 
+      /* Get ready to draw this layer */
+      thisObject.baseAsset = thisObject.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent
+      thisObject.quotedAsset = thisObject.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent
+      thisObject.market = thisObject.baseAsset.code.codeName + '/' + thisObject.quotedAsset.code.codeName
+      thisObject.exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
+      thisObject.plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent
+
+      thisObject.exchangeIcon = getIcon(thisObject.exchange)
+
+      if (thisObject.plotterModule.code.icon !== undefined) {
+        thisObject.plotterTypeIcon = canvas.designSpace.iconCollection.get(thisObject.plotterModule.code.icon)
+      }
+
+      thisObject.baseAssetIcon = getIcon(thisObject.baseAsset)
+      thisObject.quotedAssetIcon = getIcon(thisObject.quotedAsset)
+
+      function getIcon (node) {
+        let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+        let iconName
+        if (nodeDefinition.alternativeIcons !== undefined) {
+          for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) {
+            alternativeIcon = nodeDefinition.alternativeIcons[i]
+            if (alternativeIcon.codeName === node.code.codeName) {
+              iconName = alternativeIcon.iconName
+            }
+          }
+        }
+        if (iconName !== undefined) {
+          icon = canvas.designSpace.iconCollection.get(iconName)
+        } else {
+          icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon)
+        }
+        return icon
+      }
+
       callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
@@ -454,49 +508,14 @@ function newLayer () {
   }
 
   function drawLayerDisplay () {
-    let baseAsset = thisObject.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent
-    let quotedAsset = thisObject.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent
-    let market = baseAsset.code.codeName + '/' + quotedAsset.code.codeName
-    let exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
-    let plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent
-
     let label1 = thisObject.payload.node.name
-    let label2 = exchange.name.substring(0, 15) + ' - ' + market
+    let label2 = thisObject.exchange.name.substring(0, 15) + ' - ' + thisObject.market
     let label3 = thisObject.status.toUpperCase()
 
     if (label1 !== undefined) {
       label1 = label1.substring(0, 22)
     }
 
-    let icon1 = getIcon(exchange)
-
-    let icon2
-    if (plotterModule.code.icon !== undefined) {
-      icon2 = canvas.designSpace.iconCollection.get(plotterModule.code.icon)
-    }
-
-    let icon3 = getIcon(baseAsset)
-    let icon4 = getIcon(quotedAsset)
-
-    function getIcon (node) {
-      let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
-      let iconName
-      if (nodeDefinition.alternativeIcons !== undefined) {
-        for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) {
-          alternativeIcon = nodeDefinition.alternativeIcons[i]
-          if (alternativeIcon.codeName === node.code.codeName) {
-            iconName = alternativeIcon.iconName
-          }
-        }
-      }
-      if (iconName !== undefined) {
-        icon = canvas.designSpace.iconCollection.get(iconName)
-      } else {
-        icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon)
-      }
-      return icon
-    }
-
     let backgroundColor = UI_COLOR.BLACK
 
     const RED_LINE_HIGHT = 4
@@ -523,9 +542,9 @@ function newLayer () {
     drawProgressBar(singleFileProgressBar, 1, -47)
     drawProgressBar(fileSequenceProgressBar, 1, -48)
 
-    drawIcon(icon1, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container)
-    drawIcon(icon2, 7 / 8, 2 / 10, 0, 0, 14, thisObject.container)
-    drawIcon(icon3, 3.4 / 8, 2 / 10, 0, 0, 14, thisObject.container)
-    drawIcon(icon4, 4.6 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.exchangeIcon, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.plotterTypeIcon, 7 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.baseAssetIcon, 3.4 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.quotedAssetIcon, 4.6 / 8, 2 / 10, 0, 0, 14, thisObject.container)
   }
 }

CanvasApp/Spaces/ChartingSpace.js

@@ -19,6 +19,7 @@ function newChartingSpace () {
     timeMachines: undefined,
     viewport: undefined,
     payload: undefined,
+    onKeyPressed: onKeyPressed,
     reset: reset,
     oneScreenUp: oneScreenUp,
     oneScreenDown: oneScreenDown,
@@ -263,6 +264,16 @@ function newChartingSpace () {
     syncWithDesigner()
   }
 
+  function onKeyPressed (event) {
+    if (thisObject.visible !== true) { return }
+    for (let j = 0; j < thisObject.timeMachines.length; j++) {
+      let timeMachine = thisObject.timeMachines[j]
+      if (timeMachine.onFocus === true) {
+        timeMachine.onKeyPressed(event)
+      }
+    }
+  }
+
   function syncWithDesigner () {
     if (thisObject.payload === undefined) { return }
     if (thisObject.payload.node === undefined) { return }

Legacy-Code/AAMasters/plotters/Plotters-Candles-Volumes/Candles.js

@@ -470,6 +470,13 @@
 
         try {
 
+            let lowResolution = false
+            if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION) {
+                if (candles.length > 100) {
+                    lowResolution = true
+                }
+            }
+
             if (candles.length > 0) {
 
                 /* Now we calculate all the points. */
@@ -627,13 +634,17 @@
                 }
 
                 browserCanvasContext.closePath();
-                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)';
-                browserCanvasContext.fill();
 
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT + ', 1)';
-                browserCanvasContext.lineWidth = 1;
-                browserCanvasContext.setLineDash([0, 0])
-                browserCanvasContext.stroke();
+                if (lowResolution === false) {
+                    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)';
+                    browserCanvasContext.fill();
+                
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT + ', 1)';
+                    browserCanvasContext.lineWidth = 1;
+                    browserCanvasContext.setLineDash([0, 0])
+                    browserCanvasContext.stroke();
+
+                }
 
                 /* The stick at the mouse candle */
                 if (mouseCandle) {
@@ -647,8 +658,11 @@
                     browserCanvasContext.lineTo(candle.stickPoint4.x, candle.stickPoint4.y);
 
                     browserCanvasContext.closePath();
-                    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)';
-                    browserCanvasContext.fill();
+
+                    if (lowResolution === false) {
+                        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)';
+                        browserCanvasContext.fill();
+                    }
 
                     browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)';
                     browserCanvasContext.lineWidth = 1;
@@ -676,23 +690,28 @@
                         browserCanvasContext.lineTo(candle.candlePoint2.x, candle.candlePoint2.y);
                         browserCanvasContext.lineTo(candle.candlePoint3.x, candle.candlePoint3.y);
                         browserCanvasContext.lineTo(candle.candlePoint4.x, candle.candlePoint4.y);
+                        browserCanvasContext.lineTo(candle.candlePoint1.x, candle.candlePoint1.y);
                     }
 
                     browserCanvasContext.closePath();
 
+                    if (lowResolution === false) {
+
+                        if (direction === 'up') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'; }
+                        if (direction === 'down') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'; }
+                        if (direction === 'side') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; }
+
+                        browserCanvasContext.fill();
+                    }
+
                     if (direction === 'up') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'; }
                     if (direction === 'down') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', 1)'; }
                     if (direction === 'side') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; }
 
-                    if (direction === 'up') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'; }
-                    if (direction === 'down') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'; }
-                    if (direction === 'side') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; }
-
-                    browserCanvasContext.fill();
-
                     browserCanvasContext.lineWidth = 1;
                     browserCanvasContext.setLineDash([0, 0])
                     browserCanvasContext.stroke();
+                    
                 }
 
                 /* Draw mouse candel and Raise Event. */

Legacy-Code/AAMasters/plotters/Plotters-Candles-Volumes/Volumes.js

@@ -434,6 +434,13 @@
 
         try {
 
+            let lowResolution = false
+            if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION) {
+                if (volumes.length > 100) {
+                    lowResolution = true
+                }
+            }
+
             if (volumes.length > 0) {
 
                 /* Now we calculate and plot the volumes */
@@ -640,19 +647,21 @@
 
                         browserCanvasContext.closePath();
 
-                        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.40)';
+                        if (lowResolution === false) {
+                            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.40)';
 
-                        if (userPositionDate >= volume.begin && userPositionDate <= volume.end) {
-                            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current bar accroding to time
+                            if (userPositionDate >= volume.begin && userPositionDate <= volume.end) {
+                                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current bar accroding to time
+                            }
                         }
 
                         browserCanvasContext.fill();
+
                         browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 0.40)';
                         browserCanvasContext.lineWidth = 1;
                         browserCanvasContext.setLineDash([0, 0])
                         browserCanvasContext.stroke();
-
-
+                        
                         browserCanvasContext.beginPath();
 
                         browserCanvasContext.moveTo(volumePointB1.x, volumePointB1.y);
@@ -662,19 +671,22 @@
 
                         browserCanvasContext.closePath();
 
-                        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.40)';
+                        if (lowResolution === false) {
+                            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.40)';
 
-                        if (userPositionDate >= volume.begin && userPositionDate <= volume.end) {
-                            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current volume accroding to time
+                            if (userPositionDate >= volume.begin && userPositionDate <= volume.end) {
+                                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current volume accroding to time
+                            }
+
+                            browserCanvasContext.fill();
                         }
 
                         browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', 0.40)';
 
-                        browserCanvasContext.fill();
                         browserCanvasContext.lineWidth = 1;
                         browserCanvasContext.setLineDash([0, 0])
                         browserCanvasContext.stroke();
-
+                        
                         if (userPositionDate >= volume.begin && userPositionDate <= volume.end) {
 
                             let buyInfo = {

Workspace.json

@@ -1 +1 @@
-{"type":"Workspace","name":"My Workspace","rootNodes":[{"type":"Network","name":"Superalgos","networkNodes":[{"type":"Network Node","name":"My Computer","dataStorage":{"type":"Data Storage","name":"New Data Storage","sessionIndependentData":{"type":"Session Independent Data","name":"New Session Independent Data","singleMarketData":[{"type":"Single Market Data","name":"Binance BTC/USDT","dataProducts":[{"type":"Data Product","name":"Candles","id":"592901f9-9d7e-4d02-9c3e-9941fd1cbc62","savedPayload":{"position":{"x":25077.92118083212,"y":30760.520078448346},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Candles","id":"fe6065ec-4d2d-47a0-bae0-8647f0e195d7"}}},{"type":"Data Product","name":"Volumes","id":"54e5d587-dae5-4901-8625-899f3b6eb361","savedPayload":{"position":{"x":24999.96233239647,"y":30798.741502613975},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Volumes","id":"1a366aef-efef-470e-88e0-2a6fbe4dd91f"}}},{"type":"Data Product","name":"Candle-Stairs","id":"7f5856c1-cf3a-4525-8036-69da93e57771","savedPayload":{"position":{"x":24916.307713241193,"y":30821.98723359081},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Candle-Stairs","id":"642474e9-da61-4168-97dc-7f7869bebc02"}}},{"type":"Data Product","name":"Volume-Stairs","id":"fad346d0-20f9-4cf4-9663-7eb54622b5f0","savedPayload":{"position":{"x":24829.80608108897,"y":30829.46566589062},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Volume-Stairs","id":"846e9572-c4d6-4c7e-942e-c82402c5ecea"}}},{"type":"Data Product","name":"Bollinger Bands","id":"2fc1f392-7d9b-409e-9cb7-85c14e1e7c07","savedPayload":{"position":{"x":24743.403145275464,"y":30820.922130470823},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Bands","id":"29088877-8d63-4217-8d34-8742afc262f4"}}},{"type":"Data Product","name":"Percentage Bandwidth","id":"e7c4252c-3b6b-4b21-9f7a-6a6263739835","savedPayload":{"position":{"x":24660.04125415091,"y":30796.647567183296},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Percentage Bandwidth","id":"3b7885a0-cd72-4a3f-a38b-3dc8c47bd068"}}},{"type":"Data Product","name":"Bollinger Channels Objects","id":"3e9c58db-ca68-4089-9a02-d99f01428a41","savedPayload":{"position":{"x":24582.55919693599,"y":30757.468617166673},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Channels Objects","id":"1f111f72-624f-4166-9f99-ab8d785d5267"}}},{"type":"Data Product","name":"Bollinger Sub-Channels Objects","id":"b47bf5eb-2f3e-462f-aa45-8e5c6ae784bc","savedPayload":{"position":{"x":24513.595532159667,"y":30704.71947257379},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Sub-Channels Objects","id":"080c87fc-4546-4482-ab11-180a33f6d9ab"}}},{"type":"Data Product","name":"Popular SMAs","id":"67a989ee-e8da-4079-9b0a-8a7509db45a5","savedPayload":{"position":{"x":24455.498734713103,"y":30640.196442258137},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Popular SMAs","id":"4029d5bf-a8ad-4d80-b874-2af506e0ab34"}}},{"type":"Data Product","name":"Base7 SMAs","id":"763cde69-4a76-498f-a753-87baa3b227f3","savedPayload":{"position":{"x":24410.247221353908,"y":30566.09678063027},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"anLine truncated
+{"type":"Workspace","name":"My Workspace","rootNodes":[{"type":"Network","name":"Superalgos","networkNodes":[{"type":"Network Node","name":"My Computer","dataStorage":{"type":"Data Storage","name":"New Data Storage","sessionIndependentData":{"type":"Session Independent Data","name":"New Session Independent Data","singleMarketData":[{"type":"Single Market Data","name":"Binance BTC/USDT","dataProducts":[{"type":"Data Product","name":"Candles","id":"592901f9-9d7e-4d02-9c3e-9941fd1cbc62","savedPayload":{"position":{"x":25077.92118083212,"y":30760.520078448346},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Candles","id":"fe6065ec-4d2d-47a0-bae0-8647f0e195d7"}}},{"type":"Data Product","name":"Volumes","id":"54e5d587-dae5-4901-8625-899f3b6eb361","savedPayload":{"position":{"x":24999.96233239647,"y":30798.741502613975},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Volumes","id":"1a366aef-efef-470e-88e0-2a6fbe4dd91f"}}},{"type":"Data Product","name":"Candle-Stairs","id":"7f5856c1-cf3a-4525-8036-69da93e57771","savedPayload":{"position":{"x":24916.307713241193,"y":30821.98723359081},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Candle-Stairs","id":"642474e9-da61-4168-97dc-7f7869bebc02"}}},{"type":"Data Product","name":"Volume-Stairs","id":"fad346d0-20f9-4cf4-9663-7eb54622b5f0","savedPayload":{"position":{"x":24829.80608108897,"y":30829.46566589062},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Volume-Stairs","id":"846e9572-c4d6-4c7e-942e-c82402c5ecea"}}},{"type":"Data Product","name":"Bollinger Bands","id":"2fc1f392-7d9b-409e-9cb7-85c14e1e7c07","savedPayload":{"position":{"x":24743.403145275464,"y":30820.922130470823},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Bands","id":"29088877-8d63-4217-8d34-8742afc262f4"}}},{"type":"Data Product","name":"Percentage Bandwidth","id":"e7c4252c-3b6b-4b21-9f7a-6a6263739835","savedPayload":{"position":{"x":24660.04125415091,"y":30796.647567183296},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Percentage Bandwidth","id":"3b7885a0-cd72-4a3f-a38b-3dc8c47bd068"}}},{"type":"Data Product","name":"Bollinger Channels Objects","id":"3e9c58db-ca68-4089-9a02-d99f01428a41","savedPayload":{"position":{"x":24582.55919693599,"y":30757.468617166673},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Channels Objects","id":"1f111f72-624f-4166-9f99-ab8d785d5267"}}},{"type":"Data Product","name":"Bollinger Sub-Channels Objects","id":"b47bf5eb-2f3e-462f-aa45-8e5c6ae784bc","savedPayload":{"position":{"x":24513.595532159667,"y":30704.71947257379},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Sub-Channels Objects","id":"080c87fc-4546-4482-ab11-180a33f6d9ab"}}},{"type":"Data Product","name":"Popular SMAs","id":"67a989ee-e8da-4079-9b0a-8a7509db45a5","savedPayload":{"position":{"x":24455.498734713103,"y":30640.196442258137},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Popular SMAs","id":"4029d5bf-a8ad-4d80-b874-2af506e0ab34"}}},{"type":"Data Product","name":"Base7 SMAs","id":"763cde69-4a76-498f-a753-87baa3b227f3","savedPayload":{"position":{"x":24410.247221353908,"y":30566.09678063027},"targetPosition":{"x":24832.704328476622,"y":30358.975810950342},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"anLine truncated