Rate Scale Improved

Animation.js

@@ -139,6 +139,7 @@ function newAnimation () {
       }
 
       /* Media Recording */
+      videoRecorder.physics()
       if (areWeRecording === true) {
         videoRecorder.recordCanvas()
       }

ChartingSpace/TimeMachine.js

@@ -540,6 +540,11 @@ function newTimeMachine () {
   function drawBackground () {
     drawChartsBackground()
     if (thisObject.container.frame.isInViewPort()) {
+      if (drawScales === true) {
+        // if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
+      }
+
       let maxElementsPlotted = 0
       for (let i = 0; i < thisObject.timelineCharts.length; i++) {
         let timelineChart = thisObject.timelineCharts[thisObject.timelineCharts.length - i - 1]

ChartingSpace/TimelineChart.js

@@ -378,6 +378,10 @@ function newTimelineChart () {
 
   function drawBackground () {
     if (thisObject.container.frame.isInViewPort()) {
+      if (drawScales === true) {
+        // if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
+      }
       drawChartsBackground()
       if (thisObject.plotterManager !== undefined) {
         let elementsPlotted = thisObject.plotterManager.draw()

FloatingSpace/UiObject.js

@@ -97,6 +97,7 @@ function newUiObject () {
   let eventSubscriptionIdHeartbeat
   let eventSubscriptionIdOnStopped
   let lastHeartBeat
+  let newUiObjectCounter = 25
 
   return thisObject
 
@@ -280,6 +281,14 @@ function newUiObject () {
     referenceDetachingPhysics()
     referenceAttachingPhysics()
     childrenRunningPhysics()
+    newObjectPhysics()
+  }
+
+  function newObjectPhysics () {
+    newUiObjectCounter--
+    if (newUiObjectCounter < 0) {
+      newUiObjectCounter = 0
+    }
   }
 
   function heartBeatPhysics () {
@@ -940,6 +949,9 @@ function newUiObject () {
       if (thisObject.payload.floatingObject.isFrozen === true) {
         LINE_STYLE = UI_COLOR.TURQUOISE
       }
+      if (newUiObjectCounter > 0) {
+        LINE_STYLE = UI_COLOR.GREY
+      }
 
       browserCanvasContext.beginPath()
       browserCanvasContext.moveTo(position.x, position.y)

Scales/RateScale.js

@@ -14,6 +14,7 @@ function newRateScale () {
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
+    drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
@@ -431,13 +432,55 @@ function newRateScale () {
     }
   }
 
+  function drawBackground () {
+    drawScale()
+  }
+
+  function drawScale () {
+    const SEPARATION = 50
+    const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.height / SEPARATION)
+    const FONT_SIZE = 15
+
+    for (let i = 0; i <= NUMBER_OF_LABELS; i++) {
+      let ratePoint1 = {
+        x: 0,
+        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 1)
+      }
+      let ratePoint2 = {
+        x: 0,
+        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 1) - FONT_SIZE
+      }
+
+      let rate = getRateFromPointAtBrowserCanvas(ratePoint1, rateCalculationsContainer, coordinateSystem)
+      let labels = scaleLabels(rate)
+      let decimalsDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO
+
+      let fitPoint1 = thisObject.fitFunction(ratePoint1)
+      let fitPoint2 = thisObject.fitFunction(ratePoint2)
+
+      if (fitPoint1.y === ratePoint1.y && fitPoint2.y === ratePoint2.y) {
+        drawLabel(labels[1], 1 / 2, 0, 0, 0, FONT_SIZE, thisObject.container, UI_COLOR.GREY, undefined, ratePoint1.y)
+        drawLabel(labels[2], 1 / 2, 0, decimalsDisplace, -5, 9, thisObject.container, UI_COLOR.GREY, undefined, ratePoint1.y)
+      }
+    }
+  }
+
   function drawScaleBox () {
     if (thisObject.rate === undefined) { return }
     if (thisObject.payload === undefined) { return }
     if (thisObject.payload.node === undefined) { return }
 
-    let rate = thisObject.rate
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
+    let backgroundColor = UI_COLOR.BLACK
+    let rate = thisObject.rate
+    let labels = scaleLabels(rate)
+
+    drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+  }
+
+  function scaleLabels (rate) {
     if (rate < coordinateSystem.min.y) {
       rate = coordinateSystem.min.y
     }
@@ -462,16 +505,11 @@ function newRateScale () {
       label3 = ''
     }
 
-    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    let backgroundColor = UI_COLOR.BLACK
-
     if (scaleDisplayTimer > 0) {
       label2 = (coordinateSystem.scale.y * 10000).toFixed(2)
       label3 = 'SCALE'
     }
 
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+    return [label1, label2, label3]
   }
 }

Utilities/RoundedCornersBackground.js

@@ -105,8 +105,9 @@ function roundedCornersBackground (params) {
   browserCanvasContext.stroke()
 }
 
-function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, container) {
+function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, container, fontColor, noFrameX, noFrameY) {
   if (label === undefined) { return }
+  if (fontColor === undefined) { fontColor = UI_COLOR.WHITE }
   let fontOffset = label.length * fontSize * FONT_ASPECT_RATIO + 10
 
   let labelPoint = {
@@ -116,8 +117,16 @@ function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, contain
 
   labelPoint = container.frame.frameThisPoint(labelPoint)
 
+  if (noFrameX !== undefined) {
+    labelPoint.x = noFrameX + xOffset
+  }
+
+  if (noFrameY !== undefined) {
+    labelPoint.y = noFrameY + yOffset
+  }
+
   browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+  browserCanvasContext.fillStyle = 'rgba(' + fontColor + ', 1)'
 
   browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 }

VideoRecorder.js

@@ -1,12 +1,23 @@
 function newVideoRecorder () {
   let thisObject = {
-    recordCanvas: recordCanvas
+    recordCanvas: recordCanvas,
+    physics: physics
   }
   let lastAction
+  let wheelAnimationCounter = 0
+  let lastWheelPointerIcon
   return thisObject
 
+  function physics () {
+    wheelAnimationCounter--
+    if (wheelAnimationCounter < 0) {
+      wheelAnimationCounter = 0
+    }
+  }
+
   function recordCanvas () {
     {
+      console.log(canvas.mouse.action, wheelAnimationCounter)
       const DISTANCE_BETWEEN_ICONS = 35
       const ICON_SIZES = 50
 
@@ -33,16 +44,24 @@ function newVideoRecorder () {
           break
         }
         case 'wheel': {
+          wheelAnimationCounter = 25
           if (canvas.mouse.event.delta > 0) {
             pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up')
+            lastWheelPointerIcon = pointerIcon
           } else {
             pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down')
+            lastWheelPointerIcon = pointerIcon
           }
 
           break
         }
         case 'key down': {
-          pointerIcon = mousePointerIcon
+          if (wheelAnimationCounter > 0) {
+            pointerIcon = lastWheelPointerIcon
+          } else {
+            pointerIcon = mousePointerIcon
+          }
+
           break
         }
         case 'key up': {
@@ -170,4 +189,3 @@ function newVideoRecorder () {
     }
   }
 }
-