diff --git a/Animation.js b/Animation.js index 41ec4c976..14b9f8376 100644 --- a/Animation.js +++ b/Animation.js @@ -139,6 +139,7 @@ function newAnimation () { } /* Media Recording */ + videoRecorder.physics() if (areWeRecording === true) { videoRecorder.recordCanvas() } diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js index cfa079129..30c4dc509 100644 --- a/ChartingSpace/TimeMachine.js +++ b/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] diff --git a/ChartingSpace/TimelineChart.js b/ChartingSpace/TimelineChart.js index 5ae735f80..27caf7181 100644 --- a/ChartingSpace/TimelineChart.js +++ b/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() diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js index ff6efe81b..f714168c6 100644 --- a/FloatingSpace/UiObject.js +++ b/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) diff --git a/Scales/RateScale.js b/Scales/RateScale.js index e94a56a6f..36141e714 100644 --- a/Scales/RateScale.js +++ b/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] } } diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 7ce98884c..e21100bf3 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/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) } diff --git a/VideoRecorder.js b/VideoRecorder.js index e84336c95..f57152845 100644 --- a/VideoRecorder.js +++ b/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 () { } } } -