fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #107 from AAMasters/develop

Browse Source 
video recording
This commit is contained in:
Luis Fernando Molina authored and GitHub committed 2020-02-19 10:18:38 +01:00
2 parents 55b027ffe2 6a76efb924
commit 8e0384127e
50 files changed
+1970 -947
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Animation.js
+34 -13
View File
@@ -27,15 +27,18 @@ function newAnimation () {
let totalConsumption = 0
let totalCounter = 0
let pointerIcon
let videoRecorder
return thisObject
function finalize () {
thisObject.stop()
pointerIcon = undefined
videoRecorder = undefined
}
function initialize () {
videoRecorder = newVideoRecorder()
}
function start () {
@@ -73,8 +76,9 @@ function newAnimation () {
let mustExecute
// console.clear()
let row = 0
for (const [key, callBackFunction] of callBackFunctions.entries()) {
row++
switch (key) {
case 'Floating Space Physics':
chanceToExecute = 50
@@ -86,14 +90,13 @@ function newAnimation () {
}
}
let timeConsumed = 0
if (mustExecute === true) {
let t0 = performance.now()
callBackFunction()
let t1 = performance.now()
let timeConsumed = t1 - t0
if (key === 'Chart Space Draw') {
// console.log(key, (totalConsumption / totalCounter).toFixed(1))
timeConsumed = t1 - t0
if (key === 'Charting Space Draw') {
if (Math.random() * 100 > 99) {
totalConsumption = 0
totalCounter = 0
@@ -109,18 +112,37 @@ function newAnimation () {
}
/* Performance Check */
for (const [key, timeConsumed] of performanceMap.entries()) {
let percentage = timeConsumed * 100 / totalTimeConsumed
if (key === 'Chart Space Draw') {
// console.log(key, percentage.toFixed(0))
if (SHOW_ANIMATION_PERFORMACE === true) {
row = 0
for (const [key, timeConsumed] of performanceMap.entries()) {
row++
labelToPrint = key + ' ' + timeConsumed.toFixed(4)
printLabel(labelToPrint, 10, 100 + row * 30, 1, 20, UI_COLOR.RED)
let percentage = timeConsumed * 100 / totalTimeConsumed
labelToPrint = key + ' ' + percentage.toFixed(1) + '%'
printLabel(labelToPrint, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
}
/* Other Variables */
row++
printLabel(DEBUG.variable1, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
row++
printLabel(DEBUG.variable2, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
row++
printLabel(DEBUG.variable3, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
row++
printLabel(DEBUG.variable4, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
}
} else {
browserCanvas.width = 1
browserCanvas.height = 1
}
/* Media Recording */
if (areWeRecording === true) {
videoRecorder.recordCanvas()
}
/* We request the next frame to be drawn, and stablishing a loop */
/* Use this code for full animation speed. */
@@ -148,4 +170,3 @@ function newAnimation () {
browserCanvasContext.fill()
}
}
Canvas.js
+190 -112
View File
@@ -32,13 +32,14 @@ function newCanvas () {
let thisObject = {
eventHandler: undefined,
topSpace: undefined,
chartSpace: undefined,
chartingSpace: undefined,
floatingSpace: undefined,
panelsSpace: undefined,
cockpitSpace: undefined,
bottomSpace: undefined,
designerSpace: undefined,
designSpace: undefined,
animation: undefined,
mouse: undefined,
initialize: initialize,
finalize: finalize
}
@@ -49,11 +50,18 @@ function newCanvas () {
let lastContainerMouseOver
let lastShortcutKeyRejection
thisObject.mouse = {
position: {
x: 0,
y: 0
},
action: ''
}
return thisObject
function finalize () {
try {
thisObject.chartSpace.finalize()
thisObject.chartingSpace.finalize()
thisObject.floatingSpace.finalize()
browserCanvas.removeEventListener('mousedown', onMouseDown, false)
@@ -73,9 +81,12 @@ function newCanvas () {
browserCanvas.removeEventListener('drop', onDragDrop, false)
browserCanvas.removeEventListener('keydown', onKeyDown, false)
browserCanvas.removeEventListener('keyup', onKeyUp, false)
splashScreen = undefined
lastContainerMouseOver = undefined
hisObject.mouse = undefined
} catch (err) {
if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
}
@@ -95,8 +106,8 @@ function newCanvas () {
thisObject.topSpace = newTopSpace()
thisObject.topSpace.initialize()
thisObject.designerSpace = newDesignerSpace()
thisObject.designerSpace.initialize()
thisObject.designSpace = newDesignSpace()
thisObject.designSpace.initialize()
thisObject.cockpitSpace = newCockpitSpace()
thisObject.cockpitSpace.initialize()
@@ -104,8 +115,8 @@ function newCanvas () {
thisObject.panelsSpace = newPanelsSpace()
thisObject.panelsSpace.initialize()
thisObject.chartSpace = newChartSpace()
thisObject.chartSpace.initialize()
thisObject.chartingSpace = newChartingSpace()
thisObject.chartingSpace.initialize()
thisObject.bottomSpace = thisObject.cockpitSpace
@@ -122,16 +133,16 @@ function newCanvas () {
/* Spcaces Physics */
animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics)
animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics)
animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics)
animation.addCallBackFunction('Strategy Space Physics', thisObject.designerSpace.physics)
animation.addCallBackFunction('Charting Space Physics', thisObject.chartingSpace.physics)
animation.addCallBackFunction('Design Space Physics', thisObject.designSpace.physics)
animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
/* Spcaces Drawing */
animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw)
animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw)
animation.addCallBackFunction('Charting Space Draw', thisObject.chartingSpace.draw)
animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw)
animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw)
animation.addCallBackFunction('Designer Space Draw', thisObject.designerSpace.draw)
animation.addCallBackFunction('Design Space Draw', thisObject.designSpace.draw)
animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw)
animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw)
animation.start()
@@ -155,6 +166,7 @@ function newCanvas () {
/* Keyboard events */
window.addEventListener('keydown', onKeyDown, true)
window.addEventListener('keyup', onKeyUp, true)
/* Mouse Events */
browserCanvas.addEventListener('mousedown', onMouseDown, false)
@@ -194,8 +206,52 @@ function newCanvas () {
}
}
function checkMediaRecording (event) {
if ((event.ctrlKey === true || event.metaKey === true)) {
let constructorParams
switch (event.keyCode) {
case 119: { // F8
downloadCanvas('Superalgos.image.capture')
return
break
}
case 120: { // F9
constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.video.capture'}
break
}
case 121: { // F10
constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.video.capture' }
break
}
default: return
}
if (areWeRecording === false) {
console.log('RECORDING', constructorParams.format)
mediaRecorder = new CCapture(constructorParams)
mediaRecorder.start()
areWeRecording = true
} else {
console.log('SAVING', constructorParams.format)
areWeRecording = false
mediaRecorder.stop()
mediaRecorder.save()
}
}
}
function onKeyUp (event) {
thisObject.mouse.event = event
thisObject.mouse.action = 'key up'
}
function onKeyDown (event) {
let nodeOnFocus = canvas.designerSpace.workspace.getNodeThatIsOnFocus()
thisObject.mouse.event = event
thisObject.mouse.action = 'key down'
checkMediaRecording(event)
let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus()
if (nodeOnFocus !== undefined) {
if (nodeOnFocus.payload.uiObject.codeEditor !== undefined) {
if (nodeOnFocus.payload.uiObject.codeEditor.visible === true) {
@@ -231,61 +287,52 @@ function newCanvas () {
}
}
if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Regenerates APP SCHEMA FILE
/*
for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
let schemaNode = APP_SCHEMA_ARRAY[i]
schemaNode.addLeftIcons = true
if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Dev Tool when used with F11
if (SHOW_ANIMATION_PERFORMACE === false) {
SHOW_ANIMATION_PERFORMACE = true
} else {
SHOW_ANIMATION_PERFORMACE = false
}
*/
let text = JSON.stringify(APP_SCHEMA_ARRAY)
let fileName = 'AppSchema.json'
download(fileName, text)
return
}
if (event.altKey === true && event.code === 'ArrowUp') {
if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
thisObject.cockpitSpace.toTop()
return
}
if (event.altKey === true && event.code === 'ArrowDown') {
if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
thisObject.cockpitSpace.toBottom()
return
}
if (event.altKey === true && event.code === 'ArrowLeft' || event.altKey === true && event.code === 'ArrowRight') {
thisObject.cockpitSpace.toMiddle()
return
}
if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowUp') {
if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowLeft') {
thisObject.cockpitSpace.moveUp()
return
}
if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowDown') {
if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowRight') {
thisObject.cockpitSpace.moveDown()
return
}
if (event.shiftKey === true && event.ctrlKey === false && event.code === 'ArrowLeft') {
canvas.chartSpace.oneScreenLeft()
canvas.chartingSpace.oneScreenLeft()
return
}
if (event.shiftKey === true && event.ctrlKey === false && event.code === 'ArrowRight') {
canvas.chartSpace.oneScreenRight()
canvas.chartingSpace.oneScreenRight()
return
}
if (event.shiftKey === true && event.code === 'ArrowUp') {
canvas.chartSpace.oneScreenUp()
canvas.chartingSpace.oneScreenUp()
return
}
if (event.shiftKey === true && event.code === 'ArrowDown') {
canvas.chartSpace.oneScreenDown()
canvas.chartingSpace.oneScreenDown()
return
}
@@ -333,7 +380,7 @@ function newCanvas () {
/* From here we prevent the default behaviour */
event.preventDefault()
let nodeUsingThisKey = canvas.designerSpace.workspace.getNodeByShortcutKey(event.key)
let nodeUsingThisKey = canvas.designSpace.workspace.getNodeByShortcutKey(event.key)
if (nodeOnFocus === undefined && nodeUsingThisKey !== undefined) {
/* Then we displace the whole workspace to center it at the node using this key */
@@ -424,7 +471,7 @@ function newCanvas () {
x: event.x,
y: event.y
}
thisObject.designerSpace.workspace.spawn(reader.result, mousePosition)
thisObject.designSpace.workspace.spawn(reader.result, mousePosition)
}
}
} catch (err) {
@@ -434,20 +481,32 @@ function newCanvas () {
function onMouseDown (event) {
try {
let point = {
x: event.pageX,
y: event.pageY - CURRENT_TOP_MARGIN,
button: event.button
thisObject.mouse.event = event
thisObject.mouse.position.x = event.pageX
thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
switch (event.buttons) {
case 1: {
thisObject.mouse.action = 'clicking with left button'
break
}
case 2: {
thisObject.mouse.action = 'clicking with right button'
break
}
}
let point = event
point.x = event.pageX
point.y = event.pageY - CURRENT_TOP_MARGIN
dragVector.downX = point.x
dragVector.downY = point.y
let container
/* We check if the mouse is over an element of the Strategy Space / */
/* We check if the mouse is over an element of the Design Space / */
container = thisObject.designerSpace.getContainer(point)
container = thisObject.designSpace.getContainer(point)
if (container !== undefined && container.isDraggeable === true) {
containerBeingDragged = container
@@ -491,7 +550,7 @@ function newCanvas () {
container = thisObject.panelsSpace.getContainer(point)
if (container !== undefined && container.isDraggeable === true && event.button === 2) {
if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) {
containerBeingDragged = container
containerDragStarted = true
containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -503,18 +562,20 @@ function newCanvas () {
return
}
/* we check if it is over any of the existing containers at the Chart Space. */
/* we check if it is over any of the existing containers at the Charting Space. */
container = thisObject.chartSpace.getContainer(point)
container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
if (container !== undefined) {
if (container.isDraggeable === true && event.button === 2) {
if (container.isDraggeable === true) {
containerBeingDragged = container
containerDragStarted = true
containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
return
} else {
viewPortBeingDragged = true
if (container.isClickeable === false) {
viewPortBeingDragged = true
}
return
}
}
@@ -544,16 +605,16 @@ function newCanvas () {
ignoreNextClick = false
return
}
let point = {
x: event.pageX,
y: event.pageY - CURRENT_TOP_MARGIN
}
let point = event
point.x = event.pageX
point.y = event.pageY - CURRENT_TOP_MARGIN
let container
/* We check if the mouse is over an element of the Strategy Space / */
/* We check if the mouse is over an element of the Design Space / */
container = thisObject.designerSpace.getContainer(point)
container = thisObject.designSpace.getContainer(point)
if (container !== undefined && container.isClickeable === true) {
container.eventHandler.raiseEvent('onMouseClick', point)
@@ -587,9 +648,9 @@ function newCanvas () {
return
}
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
/* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
container = thisObject.chartSpace.getContainer(point)
container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
if (container !== undefined && container.isClickeable === true) {
container.eventHandler.raiseEvent('onMouseClick', point)
@@ -625,15 +686,19 @@ function newCanvas () {
function onMouseMove (event) {
try {
/* Processing the event */
let point = {
x: event.pageX,
y: event.pageY - CURRENT_TOP_MARGIN
}
thisObject.mouse.event = event
thisObject.mouse.position.x = event.pageX
thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
thisObject.mouse.action = 'moving'
if (canvas.chartSpace.viewport !== undefined) {
canvas.chartSpace.viewport.mousePosition.x = point.x
canvas.chartSpace.viewport.mousePosition.y = point.y
/* Processing the event */
let point = event
point.x = event.pageX
point.y = event.pageY - CURRENT_TOP_MARGIN
if (canvas.chartingSpace.viewport !== undefined) {
canvas.chartingSpace.viewport.mousePosition.x = point.x
canvas.chartingSpace.viewport.mousePosition.y = point.y
}
if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
@@ -673,26 +738,22 @@ function newCanvas () {
function onMouseOver (event) {
try {
let point = event
point.x = event.pageX
point.y = event.pageY - CURRENT_TOP_MARGIN
if (containerDragStarted === true) {
let point = {
x: event.pageX,
y: event.pageY - CURRENT_TOP_MARGIN
}
containerBeingDragged.eventHandler.raiseEvent('onMouseOver', point)
return
}
/* Then we check who is the current object underneeth the mounse. */
let point = {
x: event.pageX,
y: event.pageY - CURRENT_TOP_MARGIN
}
let container
/* We check if the mouse is over an element of the Strategy Space / */
if (thisObject.designerSpace !== undefined) {
container = thisObject.designerSpace.getContainer(point)
if (thisObject.designSpace !== undefined) {
container = thisObject.designSpace.getContainer(point)
if (container !== undefined && container.detectMouseOver === true) {
containerFound()
@@ -730,9 +791,9 @@ function newCanvas () {
}
}
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
if (thisObject.chartSpace !== undefined) {
container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
/* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
if (thisObject.chartingSpace !== undefined) {
container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
if (container !== undefined && container.detectMouseOver === true) {
containerFound()
@@ -766,6 +827,11 @@ function newCanvas () {
function onMouseWheel (event) {
try {
thisObject.mouse.event = event
thisObject.mouse.position.x = event.pageX
thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
thisObject.mouse.action = 'wheel'
// cross-browser wheel delta
var event = window.event || event // old IE support
event.delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail))
@@ -795,16 +861,16 @@ function newCanvas () {
return false // This instructs the browser not to take the event and scroll the page.
}
/* Chart Space. */
/* Charting Space. */
container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
container = canvas.chartingSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
if (container !== undefined && container.isWheelable === true) {
container.eventHandler.raiseEvent('onMouseWheel', event)
return false // This instructs the browser not to take the event and scroll the page.
}
if (container !== undefined) {
canvas.chartSpace.viewport.onMouseWheel(event)
canvas.chartingSpace.viewport.onMouseWheel(event)
return false
}
@@ -856,52 +922,64 @@ function newCanvas () {
function checkDrag (event) {
try {
if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
thisObject.mouse.event = event
thisObject.mouse.position.x = event.pageX
thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
thisObject.mouse.action = 'dragging'
browserCanvas.style.cursor = 'grabbing'
thisObject.eventHandler.raiseEvent('Dragging', undefined)
if (containerDragStarted || viewPortBeingDragged) {
if (viewPortBeingDragged) {
let displaceVector = {
x: dragVector.upX - dragVector.downX,
y: dragVector.upY - dragVector.downY
}
if (containerBeingDragged !== undefined && containerBeingDragged.insideViewport === true) {
let downCopy = {
x: dragVector.downX,
y: dragVector.downY
}
let downNoZoom
downNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(downCopy)
let upCopy = {
x: dragVector.upX,
y: dragVector.upY
}
let upNoZoom
upNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(upCopy)
displaceVector = {
x: upNoZoom.x - downNoZoom.x,
y: upNoZoom.y - downNoZoom.y
}
}
if (viewPortBeingDragged) {
canvas.chartSpace.viewport.displace(displaceVector)
}
canvas.chartingSpace.viewport.displace(displaceVector)
}
if (containerDragStarted) {
if (containerBeingDragged !== undefined) {
let moveSucceed = containerBeingDragged.displace(displaceVector)
if (moveSucceed === false) {
deactivateDragging(event)
if (containerBeingDragged.space === 'Charting Space') {
let downCopy = {
x: dragVector.downX,
y: dragVector.downY
}
let downNoZoom
downNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(downCopy)
let upCopy = {
x: dragVector.upX,
y: dragVector.upY
}
let upNoZoom
upNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(upCopy)
displaceVector = {
x: upNoZoom.x - downNoZoom.x,
y: upNoZoom.y - downNoZoom.y
}
let moveSucceed = containerBeingDragged.displace(displaceVector)
if (moveSucceed === false) {
deactivateDragging(event)
}
} else {
let displaceVector = {
x: dragVector.upX - dragVector.downX,
y: dragVector.upY - dragVector.downY
}
let moveSucceed = containerBeingDragged.displace(displaceVector)
if (moveSucceed === false) {
deactivateDragging(event)
}
}
}
}
/* Finally we set the starting point of the new dragVector at this current point. */
/* Finally we set the starting point of the new dragVector at this current point. */
dragVector.downX = dragVector.upX
dragVector.downY = dragVector.upY
}
ChartsSpace/ChartUtilities.js → ChartingSpace/ChartUtilities.js
View File
File renamed without changes.
ChartsSpace/CoordinateSystem.js → ChartingSpace/CoordinateSystem.js
+131 -7
View File
@@ -15,6 +15,15 @@ function newCoordinateSystem () {
maxWidth: undefined,
scale: undefined,
eventHandler: undefined,
autoMinXScale: true,
autoMaxXScale: true,
autoMinYScale: true,
autoMaxYScale: true,
physics: physics,
reportXValue: reportXValue,
reportYValue: reportYValue,
zoomX: zoomX,
zoomY: zoomY,
recalculateScale: recalculateScale,
transformThisPoint: transformThisPoint,
transformThisPoint2: transformThisPoint2,
@@ -42,6 +51,14 @@ function newCoordinateSystem () {
thisObject.eventHandler = newEventHandler()
thisObject.eventHandler.name = 'Coordinate System'
let newXMax = -VERY_LARGE_NUMBER
let newXMin = VERY_LARGE_NUMBER
let noXValueReported = true
let newYMax = -VERY_LARGE_NUMBER
let newYMin = VERY_LARGE_NUMBER
let noYValueReported = true
return thisObject
function finalize () {
@@ -51,11 +68,11 @@ function newCoordinateSystem () {
function initialize (minValue, maxValue, pMaxWidth, pMaxHeight) {
/* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
thisObject.min.x = minValue.x // * 0.999; // 0.1% less
thisObject.max.x = maxValue.x // * 1.001; // 0.1% more
thisObject.min.x = minValue.x
thisObject.max.x = maxValue.x
thisObject.min.y = minValue.y // * 0.999; // 0.1% less
thisObject.max.y = maxValue.y // * 1.001; // 0.1% more
thisObject.min.y = minValue.y
thisObject.max.y = maxValue.y
thisObject.maxWidth = pMaxWidth
thisObject.maxHeight = pMaxHeight
@@ -63,12 +80,119 @@ function newCoordinateSystem () {
recalculateScale()
}
function recalculateScale () {
/* Defines the initial Zoom level at center position. */
function physics () {
let mustRecalculate = false
if ((thisObject.autoMinXScale === true || thisObject.autoMaxXScale === true) && noXValueReported === false) {
if (thisObject.autoMaxXScale === true && thisObject.max.x !== newXMax) {
thisObject.max.x = newXMax
mustRecalculate = true
}
if (thisObject.autoMaxXScale === true) {
newXMax = -VERY_LARGE_NUMBER
}
if (thisObject.autoMinXScale === true && thisObject.min.x !== newXMin) {
thisObject.min.x = newXMin
newXMin = VERY_LARGE_NUMBER
mustRecalculate = true
}
if (thisObject.autoMinXScale === true) {
newXMin = VERY_LARGE_NUMBER
}
/* Reseting this to start over at each cycle. */
noXValueReported = true
}
if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true) && noYValueReported === false) {
if (thisObject.autoMaxYScale === true && thisObject.max.y !== newYMax) {
thisObject.max.y = newYMax
mustRecalculate = true
}
if (thisObject.autoMaxYScale === true) {
newYMax = -VERY_LARGE_NUMBER
}
if (thisObject.autoMinYScale === true && thisObject.min.y !== newYMin) {
thisObject.min.y = newYMin
newYMin = VERY_LARGE_NUMBER
mustRecalculate = true
}
if (thisObject.autoMinYScale === true) {
newYMin = VERY_LARGE_NUMBER
}
/* Reseting this to start over at each cycle. */
noYValueReported = true
}
if (mustRecalculate === true) {
recalculateScale()
}
}
function reportXValue (value) {
if (thisObject.autoMinXScale === true) {
if (value < newXMin) { newXMin = value }
noXValueReported = false
}
if (thisObject.autoMaxXScale === true) {
if (value > newXMax) { newXMax = value }
noXValueReported = false
}
}
function reportYValue (value) {
if (thisObject.autoMinYScale === true) {
if (value < newYMin) { newYMin = value }
noYValueReported = false
}
if (thisObject.autoMaxYScale === true) {
if (value > newYMax) { newYMax = value }
noYValueReported = false
}
}
function zoomX (factor, mousePosition, container) {
let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
let leftDistance = mouseAtCointainer.x
let rightDistance = container.frame.width - mouseAtCointainer.x
let diff = thisObject.max.x - thisObject.min.x
let min = thisObject.min.x + diff * factor * leftDistance / (container.frame.width / 2)
let max = thisObject.max.x - diff * factor * rightDistance / (container.frame.width / 2)
if (min < max) {
thisObject.min.x = min
thisObject.max.x = max
thisObject.recalculateScale()
}
}
function zoomY (factor, mousePosition, container) {
let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
let topDistance = mouseAtCointainer.y
let bottomDistance = container.frame.height - mouseAtCointainer.y
let diff = thisObject.max.y - thisObject.min.y
let min = thisObject.min.y + diff * factor * bottomDistance / (container.frame.height / 2)
let max = thisObject.max.y - diff * factor * topDistance / (container.frame.height / 2)
if (min < max) {
thisObject.min.y = min
thisObject.max.y = max
thisObject.recalculateScale()
}
}
function recalculateScale (event) {
thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
thisObject.scale.y = thisObject.maxHeight / (thisObject.max.y - thisObject.min.y)
thisObject.eventHandler.raiseEvent('Scale Changed')
thisObject.eventHandler.raiseEvent('Scale Changed', event)
}
function initializeX (minValue, maxValue, maxWidth) {
ChartingSpace/EdgeEditor.js
+475
View File
@@ -0,0 +1,475 @@
function newEdgeEditor () {
const MODULE_NAME = 'Edge Editor'
let thisObject = {
container: undefined,
fitFunction: undefined,
isVisible: true,
physics: physics,
drawForeground: drawForeground,
getContainer: getContainer,
initialize: initialize,
finalize: finalize
}
const EDGE_SIZE = 6
thisObject.container = newContainer()
thisObject.container.initialize(MODULE_NAME)
thisObject.container.isDraggeable = true
thisObject.container.isClickeable = false
thisObject.container.isWheelable = false
thisObject.container.detectMouseOver = true
let buttonUsedForDragging
let isMouseOver
let whereIsMouseOver = 'outside'
let coordinateSystem
let onMouseOverEventSubscriptionId
let onMouseNotOverEventSubscriptionId
let onDragStartedEventSubscriptionId
let mouse = {
position: {
x: 0,
y: 0
}
}
return thisObject
function finalize () {
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
thisObject.container.finalize()
thisObject.container = undefined
thisObject.fitFunction = undefined
mouse = undefined
}
function initialize (pCoordinateSystem) {
coordinateSystem = pCoordinateSystem
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
}
function onMouseOver (event) {
isMouseOver = true
mouse = {
position: {
x: event.x,
y: event.y
}
}
}
function onMouseNotOver () {
isMouseOver = false
}
function onDragStarted (event) {
switch (event.buttons) {
case 1: {
buttonUsedForDragging = 'left mouse button'
break
}
case 2: {
buttonUsedForDragging = 'right mouse button'
break
}
}
}
function getContainer (event, purpose) {
if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
let point = {
x: event.x,
y: event.y
}
point = unTransformThisPoint(point, thisObject.container)
if (point.x <= 0) {
whereIsMouseOver = 'left'
return thisObject.container
}
if (point.x >= thisObject.container.frame.width) {
whereIsMouseOver = 'right'
return thisObject.container
}
if (point.y <= 0) {
whereIsMouseOver = 'top'
return thisObject.container
}
if (point.y >= thisObject.container.frame.height) {
whereIsMouseOver = 'bottom'
return thisObject.container
}
whereIsMouseOver = 'center'
switch (purpose) {
case GET_CONTAINER_PURPOSE.MOUSE_OVER:
return // We will let the Time Machine to handle this situation.
break
case GET_CONTAINER_PURPOSE.DRAGGING:
return thisObject.container
break
}
}
}
function physics () {
if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
let dragVector = {
x: thisObject.container.frame.position.x,
y: thisObject.container.frame.position.y
}
thisObject.container.frame.position.x = 0
thisObject.container.frame.position.y = 0
const MIN_WIDTH = 100
const MIN_HEIGHT = 50
switch (whereIsMouseOver) {
case 'center': {
switch (buttonUsedForDragging) {
case 'right mouse button': {
/* 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
thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
thisObject.container.parentContainer.eventHandler.raiseEvent('onDisplace')
break
}
case 'left mouse button': {
let point = {
x: -dragVector.x,
y: -dragVector.y
}
let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
coordinateSystem.min.x = newMinDate.valueOf()
coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
coordinateSystem.max.y = newMaxRate
let event = {
type: 'center dragged',
dragVector: dragVector
}
coordinateSystem.recalculateScale(event)
}
}
thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
break
}
case 'top' : {
if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT && dragVector.y > 0) {
return
}
let point = {
x: dragVector.x,
y: dragVector.y
}
let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
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) {
case 'left mouse button': {
coordinateSystem.max.y = newMaxRate
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
let event = {
type: 'top dragged',
dragVector: dragVector
}
coordinateSystem.recalculateScale(event)
break
}
case 'right mouse button': {
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
coordinateSystem.recalculateScale()
break
}
}
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
break
}
case 'bottom' : {
if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT && dragVector.y < 0) {
return
}
let point = {
x: dragVector.x,
y: dragVector.y + thisObject.container.frame.height
}
let newMinRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
switch (buttonUsedForDragging) {
case 'left mouse button': {
coordinateSystem.min.y = newMinRate
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
let event = {
type: 'bottom dragged',
dragVector: dragVector
}
coordinateSystem.recalculateScale(event)
break
}
case 'right mouse button': {
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
coordinateSystem.recalculateScale()
break
}
}
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
break
}
case 'left' : {
if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH && dragVector.x > 0) {
return
}
let point = {
x: dragVector.x,
y: dragVector.y
}
let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
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) {
case 'left mouse button': {
coordinateSystem.min.x = newMinDate.valueOf()
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
coordinateSystem.recalculateScale()
break
}
case 'right mouse button': {
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
coordinateSystem.recalculateScale()
break
}
}
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
break
}
case 'right' : {
if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH && dragVector.x < 0) {
return
}
let point = {
x: dragVector.x + thisObject.container.frame.width,
y: dragVector.y
}
let newMaxDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
switch (buttonUsedForDragging) {
case 'left mouse button': {
coordinateSystem.max.x = newMaxDate.valueOf()
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
coordinateSystem.recalculateScale()
break
}
case 'right mouse button': {
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
coordinateSystem.recalculateScale()
break
}
}
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
break
}
}
}
function drawForeground () {
let MARGIN = 1
let edgeSize
let lineWidth
if (whereIsMouseOver === 'outside' || isMouseOver === false) {
edgeSize = EDGE_SIZE / 2
lineWidth = 0.1
} else {
edgeSize = EDGE_SIZE
lineWidth = 0.5
}
const OPACITY = 1
pointA1 = {
x: 0,
y: 0
}
pointA2 = {
x: thisObject.container.frame.width,
y: 0
}
pointA3 = {
x: thisObject.container.frame.width,
y: thisObject.container.frame.height
}
pointA4 = {
x: 0,
y: thisObject.container.frame.height
}
pointB1 = {
x: 0,
y: 0
}
pointB2 = {
x: thisObject.container.frame.width,
y: 0
}
pointB3 = {
x: thisObject.container.frame.width,
y: thisObject.container.frame.height
}
pointB4 = {
x: 0,
y: thisObject.container.frame.height
}
pointA1 = transformThisPoint(pointA1, thisObject.container)
pointA2 = transformThisPoint(pointA2, thisObject.container)
pointA3 = transformThisPoint(pointA3, thisObject.container)
pointA4 = transformThisPoint(pointA4, thisObject.container)
pointB1 = transformThisPoint(pointB1, thisObject.container)
pointB2 = transformThisPoint(pointB2, thisObject.container)
pointB3 = transformThisPoint(pointB3, thisObject.container)
pointB4 = transformThisPoint(pointB4, thisObject.container)
pointA1 = {
x: pointA1.x - MARGIN,
y: pointA1.y - MARGIN
}
pointA2 = {
x: pointA2.x + MARGIN,
y: pointA2.y - MARGIN
}
pointA3 = {
x: pointA3.x + MARGIN,
y: pointA3.y + MARGIN
}
pointA4 = {
x: pointA4.x - MARGIN,
y: pointA4.y + MARGIN
}
pointB1 = {
x: pointB1.x - edgeSize,
y: pointB1.y - edgeSize
}
pointB2 = {
x: pointB2.x + edgeSize,
y: pointB2.y - edgeSize
}
pointB3 = {
x: pointB3.x + edgeSize,
y: pointB3.y + edgeSize
}
pointB4 = {
x: pointB4.x - edgeSize,
y: pointB4.y + edgeSize
}
pointA1 = canvas.chartingSpace.viewport.fitIntoViewport(pointA1)
pointA2 = canvas.chartingSpace.viewport.fitIntoViewport(pointA2)
pointA3 = canvas.chartingSpace.viewport.fitIntoViewport(pointA3)
pointA4 = canvas.chartingSpace.viewport.fitIntoViewport(pointA4)
pointB1 = canvas.chartingSpace.viewport.fitIntoViewport(pointB1)
pointB2 = canvas.chartingSpace.viewport.fitIntoViewport(pointB2)
pointB3 = canvas.chartingSpace.viewport.fitIntoViewport(pointB3)
pointB4 = canvas.chartingSpace.viewport.fitIntoViewport(pointB4)
browserCanvasContext.setLineDash([0, 0])
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(pointA1.x, pointA1.y)
browserCanvasContext.lineTo(pointA2.x, pointA2.y)
browserCanvasContext.lineTo(pointB2.x, pointB2.y)
browserCanvasContext.lineTo(pointB1.x, pointB1.y)
browserCanvasContext.lineTo(pointA1.x, pointA1.y)
browserCanvasContext.closePath()
drawEdge('top')
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(pointA2.x, pointA2.y)
browserCanvasContext.lineTo(pointA3.x, pointA3.y)
browserCanvasContext.lineTo(pointB3.x, pointB3.y)
browserCanvasContext.lineTo(pointB2.x, pointB2.y)
browserCanvasContext.lineTo(pointA2.x, pointA2.y)
browserCanvasContext.closePath()
drawEdge('right')
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(pointA3.x, pointA3.y)
browserCanvasContext.lineTo(pointA4.x, pointA4.y)
browserCanvasContext.lineTo(pointB4.x, pointB4.y)
browserCanvasContext.lineTo(pointB3.x, pointB3.y)
browserCanvasContext.lineTo(pointA3.x, pointA3.y)
browserCanvasContext.closePath()
drawEdge('bottom')
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(pointA4.x, pointA4.y)
browserCanvasContext.lineTo(pointA1.x, pointA1.y)
browserCanvasContext.lineTo(pointB1.x, pointB1.y)
browserCanvasContext.lineTo(pointB4.x, pointB4.y)
browserCanvasContext.lineTo(pointA4.x, pointA4.y)
browserCanvasContext.closePath()
drawEdge('left')
function drawEdge (edgeType) {
if (whereIsMouseOver === edgeType && isMouseOver === true) {
browserCanvasContext.lineWidth = lineWidth
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
} else {
browserCanvasContext.lineWidth = lineWidth
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
}
browserCanvasContext.fill()
browserCanvasContext.stroke()
}
}
}
ChartsSpace/PlottersManager.js → ChartingSpace/PlottersManager.js
View File
File renamed without changes.
ChartsSpace/TimeMachine.js → ChartingSpace/TimeMachine.js
+87 -70
View File
@@ -21,6 +21,7 @@ function newTimeMachine () {
timeScale: undefined,
rateScale: undefined,
payload: undefined,
edgeEditor: undefined,
timelineCharts: [],
fitFunction: fitFunction,
physics: physics,
@@ -49,12 +50,11 @@ function newTimeMachine () {
let onViewportZoomChangedEventSuscriptionId
let onMouseOverEventSuscriptionId
let onMouseNotOverEventSuscriptionId
let timeScaleValueEventSuscriptionId
let timeScaleMouseOverEventSuscriptionId
let rateScaleValueEventSuscriptionId
let rateScaleMouseOverEventSuscriptionId
let timeFrameScaleEventSuscriptionId
let timeFrameScaleMouseOverEventSuscriptionId
let onScaleChangedEventSubscriptionId
setupContainer()
return thisObject
@@ -63,7 +63,7 @@ function newTimeMachine () {
thisObject.container = newContainer()
thisObject.container.initialize(MODULE_NAME)
thisObject.container.fitFunction = thisObject.fitFunction
thisObject.container.isDraggeable = true
thisObject.container.isDraggeable = false
thisObject.container.insideViewport = true
thisObject.container.detectMouseOver = true
@@ -72,8 +72,9 @@ function newTimeMachine () {
}
function finalize () {
canvas.chartSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
timeMachineCoordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
if (thisObject.timeScale !== undefined) {
finalizeTimeScale()
@@ -101,6 +102,7 @@ function newTimeMachine () {
thisObject.container.finalize()
thisObject.container = undefined
thisObject.payload = undefined
thisObject.edgeEditor = undefined
mouse = undefined
timelineChartsMap = undefined
@@ -112,7 +114,6 @@ function newTimeMachine () {
function finalizeTimeScale () {
if (thisObject.timeScale === undefined) { return }
thisObject.timeScale.container.eventHandler.stopListening(timeScaleValueEventSuscriptionId)
thisObject.timeScale.container.eventHandler.stopListening(timeScaleMouseOverEventSuscriptionId)
thisObject.timeScale.finalize()
thisObject.timeScale = undefined
@@ -121,7 +122,6 @@ function newTimeMachine () {
function finalizeRateScale () {
if (thisObject.rateScale === undefined) { return }
thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId)
thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
thisObject.rateScale.finalize()
thisObject.rateScale = undefined
@@ -139,17 +139,22 @@ function newTimeMachine () {
function initialize (callBackFunction) {
timeFrame = INITIAL_TIME_PERIOD
loadFrame(thisObject.payload, thisObject.container.frame)
saveFrame(thisObject.payload, thisObject.container.frame)
recalculateCoordinateSystem()
recalculateCurrentDatetime()
onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
onViewportPositionChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
onViewportZoomChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
onScaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
thisObject.edgeEditor = newEdgeEditor()
thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true, true, true)
callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
callBackFunction()
}
function onMouseOver (event) {
@@ -188,23 +193,9 @@ function newTimeMachine () {
thisObject.timeScale.fitFunction = thisObject.fitFunction
thisObject.timeScale.payload = thisObject.payload.node.timeScale.payload
timeScaleValueEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Time Scale Value Changed', timeScaleValueChanged)
timeScaleMouseOverEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('onMouseOverScale', timeScaleMouseOver)
thisObject.timeScale.initialize(timeMachineCoordinateSystem, thisObject.container)
function timeScaleValueChanged (event) {
if (event.isUserAction === true) {
let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
recalculateCoordinateSystem()
moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, false, true, event.mousePosition)
} else {
thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
recalculateCoordinateSystem()
}
thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
}
function timeScaleMouseOver (event) {
thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
}
@@ -215,25 +206,9 @@ function newTimeMachine () {
thisObject.rateScale.fitFunction = thisObject.fitFunction
thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged)
rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
thisObject.rateScale.initialize(timeMachineCoordinateSystem, thisObject.container, thisObject.container)
function rateScaleValueChanged (event) {
if (event.isUserAction === true) {
let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
recalculateCoordinateSystem()
moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, true, false, event.mousePosition)
} else {
thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
recalculateCoordinateSystem()
}
thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
thisObject.container.eventHandler.raiseEvent('Upstream Rate Scale Value Changed', event)
}
function rateScaleMouseOver (event) {
thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
}
@@ -270,25 +245,33 @@ function newTimeMachine () {
let container
if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
container = thisObject.rateScale.getContainer(point)
container = thisObject.rateScale.getContainer(point, purpose)
if (container !== undefined) {
if (container.isForThisPurpose(purpose)) {
return container
} else {
if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
return container
}
}
}
}
if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) {
container = thisObject.timeScale.getContainer(point)
container = thisObject.timeScale.getContainer(point, purpose)
if (container !== undefined) {
if (container.isForThisPurpose(purpose)) {
return container
} else {
if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
return container
}
}
}
}
if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
container = thisObject.timeFrameScale.getContainer(point)
container = thisObject.timeFrameScale.getContainer(point, purpose)
if (container !== undefined) {
if (container.isForThisPurpose(purpose)) {
return container
@@ -303,12 +286,25 @@ function newTimeMachine () {
if (thisObject.container.frame.isThisPointHere(point) === true) {
return container
}
} else {
if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
if (thisObject.container.frame.isThisPointHere(point) === true) {
return container
}
}
}
}
}
if (thisObject.container.frame.isThisPointHere(point) === true) {
return thisObject.container
container = thisObject.edgeEditor.getContainer(point, purpose)
if (container !== undefined) {
return container
} else {
if (thisObject.container.isForThisPurpose(purpose)) {
if (thisObject.container.frame.isThisPointHere(point) === true) {
return thisObject.container
}
}
}
}
@@ -324,14 +320,18 @@ function newTimeMachine () {
}
}
function onScaleChanged () {
recalculateCurrentDatetime()
}
function recalculateCurrentDatetime () {
/*
The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we
must calculate.
*/
let center = {
x: (canvas.chartSpace.viewport.visibleArea.bottomRight.x - canvas.chartSpace.viewport.visibleArea.bottomLeft.x) / 2,
y: (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2
x: (canvas.chartingSpace.viewport.visibleArea.bottomRight.x - canvas.chartingSpace.viewport.visibleArea.bottomLeft.x) / 2,
y: (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2
}
center = unTransformThisPoint(center, thisObject.container)
@@ -346,7 +346,7 @@ function newTimeMachine () {
}
function fitFunction (point, fullVisible, margin, topMargin, bottomMargin) {
/* We prevent a point to be out of the container AND out of the Chart Space in general */
/* We prevent a point to be out of the container AND out of the Charting Space in general */
let returnPoint = {
x: point.x,
@@ -376,12 +376,15 @@ function newTimeMachine () {
if (returnPoint.y - margin - topMargin < upCorner.y) { returnPoint.y = upCorner.y + margin + topMargin }
if (returnPoint.y + margin + bottomMargin > bottonCorner.y) { returnPoint.y = bottonCorner.y - margin - bottomMargin }
returnPoint = canvas.chartSpace.fitFunction(returnPoint, fullVisible)
returnPoint = canvas.chartingSpace.fitFunction(returnPoint, fullVisible)
return returnPoint
}
function physics () {
thisObject.edgeEditor.physics()
timeMachineCoordinateSystem.physics()
saveFrame(thisObject.payload, thisObject.container.frame)
if (thisObject.container.frame.isInViewPort()) {
childrenPhysics()
@@ -391,10 +394,12 @@ function newTimeMachine () {
}
function panelPhysics () {
if (thisObject.container.frame.isInViewPort()) {
canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
if (thisObject.container.frame.isInViewPort() && canvas.chartingSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS) {
canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Layers Panel')
canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Plotter Panel')
} else {
canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')
canvas.panelsSpace.hide(thisObject.payload.node.id, 'Layers Panel')
canvas.panelsSpace.hide(thisObject.payload.node.id, 'Plotter Panel')
}
}
@@ -475,7 +480,7 @@ function newTimeMachine () {
timelineChart.container.frame.height = thisObject.container.frame.height
timelineChart.container.frame.position.x = 0
timelineChart.container.frame.position.y = 0
timelineChart.initialize(timeMachineCoordinateSystem)
timelineChart.initialize(timeMachineCoordinateSystem, timeFrame)
/* we will store the event suscription id as a property of the timelineChart, to avoid keeping it an a separate array */
timelineChart.onChildrenMouseOverEventSuscriptionId = timelineChart.container.eventHandler.listenToEvent('onChildrenMouseOver', onChildrenMouseOver)
@@ -521,6 +526,8 @@ function newTimeMachine () {
}
function draw () {
if (thisObject.payload === undefined) { return }
if (thisObject.payload.node === undefined) { return }
if (thisObject.container.frame.isInViewPort()) {
for (let i = 0; i < thisObject.timelineCharts.length; i++) {
let timelineChart = thisObject.timelineCharts[thisObject.timelineCharts.length - i - 1]
@@ -533,7 +540,7 @@ function newTimeMachine () {
if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
}
} else {
let icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
if (icon !== undefined) {
if (icon.canDrawIcon === true) {
let imageSize = 40
@@ -569,13 +576,33 @@ function newTimeMachine () {
if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
}
let style = {
color: UI_COLOR.BLACK,
opacity: 1,
lineWidth: 1,
lineDash: [1, 3]
drawLabel()
thisObject.edgeEditor.drawForeground()
}
}
function drawLabel () {
/* Draw Title Above the Container */
let position = {
x: 0,
y: 0
}
let imageSize = 25
let fontSize = 25
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)
if (icon !== undefined) {
if (icon.canDrawIcon === true) {
browserCanvasContext.drawImage(
icon, position.x - 0,
position.y - 30,
imageSize,
imageSize)
}
thisObject.container.frame.draw(false, true, false, thisObject.fitFunction, style)
}
}
@@ -590,16 +617,6 @@ function newTimeMachine () {
y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
}
if (thisObject.timeScale !== undefined) {
minValue.x = thisObject.timeScale.fromDate
maxValue.x = thisObject.timeScale.toDate
}
if (thisObject.rateScale !== undefined) {
minValue.y = thisObject.rateScale.minValue
maxValue.y = thisObject.rateScale.maxValue
}
timeMachineCoordinateSystem.initialize(
minValue,
maxValue,
ChartsSpace/TimelineChart.js → ChartingSpace/TimelineChart.js
+47 -67
View File
@@ -38,11 +38,8 @@ function newTimelineChart () {
let onMouseOverEventSuscriptionId
let onMouseNotOverEventSuscriptionId
let rateScaleValueEventSuscriptionId
let rateScaleUpstreamEventSuscriptionId
let rateScaleMouseOverEventSuscriptionId
let rateScaleOffsetEventSuscriptionId
let rateScaleUpstreamDimensionsEventSuscriptionId
let timeFrameScaleEventSuscriptionId
let timeFrameScaleMouseOverEventSuscriptionId
let scaleChangedEventSubscriptionId
@@ -65,7 +62,7 @@ function newTimelineChart () {
}
function finalize () {
coordinateSystem.eventHandler.stopListening(timelineChartCoordinateSystem)
coordinateSystem.eventHandler.stopListening(scaleChangedEventSubscriptionId)
if (thisObject.layersManager !== undefined) {
finalizeLayersManager()
@@ -124,35 +121,56 @@ function newTimelineChart () {
function finalizeRateScale () {
if (thisObject.rateScale === undefined) { return }
thisObject.rateScale.container.eventHandler.stopListening(rateScaleOffsetEventSuscriptionId)
thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId)
thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamEventSuscriptionId)
thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamDimensionsEventSuscriptionId)
thisObject.rateScale.finalize()
thisObject.rateScale = undefined
/* Resets the local container with the dimessions of its parent, the Time Machine */
thisObject.container.frame.position.x = 0
thisObject.container.frame.position.y = 0
thisObject.container.frame.height = TIME_MACHINE_HEIGHT
thisObject.container.frame.width = TIME_MACHINE_WIDTH
thisObject.container.frame.height = thisObject.container.parentContainer.frame.height
thisObject.container.frame.width = thisObject.container.parentContainer.frame.width
}
function initialize (pTimeMachineCoordinateSystem) {
function initialize (pTimeMachineCoordinateSystem, pTimeFrame) {
/* We load the logow we will need for the background. */
timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
coordinateSystem = timeMachineCoordinateSystem
onScaleChanged()
initializeCoordinateSystem()
timeFrame = INITIAL_TIME_PERIOD
timeFrame = pTimeFrame
onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
scaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
}
function initializeCoordinateSystem () {
let minValue = {
x: timeMachineCoordinateSystem.min.x,
y: 0
}
let maxValue = {
x: timeMachineCoordinateSystem.max.x,
y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
}
if (thisObject.rateScale !== undefined) {
minValue.y = thisObject.rateScale.minValue
maxValue.y = thisObject.rateScale.maxValue
}
timelineChartCoordinateSystem.initialize(
minValue,
maxValue,
thisObject.container.frame.width,
thisObject.container.frame.height
)
}
function initializeLayersManager () {
let owner = thisObject.payload.node.payload.parentNode.id // The real owner is the Time Machine
layersPanelHandle = canvas.panelsSpace.createNewPanel('Layers Panel', undefined, owner)
@@ -181,36 +199,9 @@ function newTimelineChart () {
thisObject.rateScale.fitFunction = thisObject.fitFunction
thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
rateScaleOffsetEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Offset Changed', rateScaleOffsetChanged)
rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged)
rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
rateScaleUpstreamEventSuscriptionId = thisObject.container.parentContainer.eventHandler.listenToEvent('Upstream Rate Scale Value Changed', rateScaleUpstreamChanged)
rateScaleUpstreamDimensionsEventSuscriptionId = thisObject.container.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', rateScaleUpstreamDimensioinsChanged)
thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer, thisObject.container)
function rateScaleUpstreamDimensioinsChanged () {
thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * thisObject.rateScale.scale
recalculateCoordinateSystem()
thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
}
function rateScaleUpstreamChanged (event) {
// thisObject.rateScale.setScale(event.scale)
}
function rateScaleOffsetChanged (event) {
if (thisObject.container.frame.offset.y !== event.offset) {
thisObject.container.frame.offset.y = event.offset
thisObject.container.eventHandler.raiseEvent('onDisplace')
}
}
function rateScaleValueChanged (event) {
thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
recalculateCoordinateSystem()
thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
}
function rateScaleMouseOver (event) {
thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
}
@@ -240,9 +231,16 @@ function newTimelineChart () {
}
}
function onScaleChanged () {
function onScaleChanged (event) {
if (thisObject.rateScale !== undefined) {
thisObject.rateScale.onUpstreamScaleChanged(event)
}
timelineChartCoordinateSystem.min.x = timeMachineCoordinateSystem.min.x
timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
timelineChartCoordinateSystem.maxHeight = timeMachineCoordinateSystem.maxHeight
timelineChartCoordinateSystem.maxWidth = timeMachineCoordinateSystem.maxWidth
timelineChartCoordinateSystem.autoMinXScale = timeMachineCoordinateSystem.autoMinXScale
timelineChartCoordinateSystem.autoMaxXScale = timeMachineCoordinateSystem.autoMaxXScale
timelineChartCoordinateSystem.recalculateScale()
}
@@ -292,7 +290,7 @@ function newTimelineChart () {
let container
if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
container = thisObject.rateScale.getContainer(point)
container = thisObject.rateScale.getContainer(point, purpose)
if (container !== undefined) {
if (container.isForThisPurpose(purpose)) {
return container
@@ -301,7 +299,7 @@ function newTimelineChart () {
}
if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
container = thisObject.timeFrameScale.getContainer(point)
container = thisObject.timeFrameScale.getContainer(point, purpose)
if (container !== undefined) {
if (container.isForThisPurpose(purpose)) {
return container
@@ -320,7 +318,7 @@ function newTimelineChart () {
}
function thisObjectPhysics () {
timelineChartCoordinateSystem.physics()
}
function syncWithDesignerLayersManager () {
@@ -346,10 +344,16 @@ function newTimelineChart () {
if (thisObject.payload.node.rateScale === undefined && thisObject.rateScale !== undefined) {
finalizeRateScale()
coordinateSystem = timeMachineCoordinateSystem
if (thisObject.plotterManager !== undefined) {
thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
}
}
if (thisObject.payload.node.rateScale !== undefined && thisObject.rateScale === undefined) {
initializeRateScale()
coordinateSystem = timelineChartCoordinateSystem
if (thisObject.plotterManager !== undefined) {
thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
}
}
if (thisObject.payload.node.timeFrameScale === undefined && thisObject.timeFrameScale !== undefined) {
finalizeTimeFrameScale()
@@ -400,28 +404,4 @@ function newTimelineChart () {
function drawChartsBackground () {
drawContainerBackground(thisObject.container, UI_COLOR.WHITE, 0, thisObject.fitFunction)
}
function recalculateCoordinateSystem () {
let minValue = {
x: timelineChartCoordinateSystem.min.x,
y: 0
}
let maxValue = {
x: timelineChartCoordinateSystem.max.x,
y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
}
if (thisObject.rateScale !== undefined) {
minValue.y = thisObject.rateScale.minValue
maxValue.y = thisObject.rateScale.maxValue
}
timelineChartCoordinateSystem.initialize(
minValue,
maxValue,
thisObject.container.frame.width,
thisObject.container.frame.height
)
}
}
ChartsSpace/ViewPort.js → ChartingSpace/Viewport.js
+36 -14
View File
@@ -34,7 +34,9 @@ function newViewport () {
transformThisPoint: transformThisPoint,
unTransformThisPoint: unTransformThisPoint,
isThisPointVisible: isThisPointVisible,
isThisPointInViewport: isThisPointInViewport,
fitIntoVisibleArea: fitIntoVisibleArea,
fitIntoViewport: fitIntoViewport,
displace: displace,
physics: physics,
raiseEvents: raiseEvents,
@@ -174,6 +176,7 @@ function newViewport () {
}
function onMouseWheel (event) {
if ((event.ctrlKey === true || event.metaKey === true)) { return }
let morePower = 1
let amount = event.delta
if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed.
@@ -219,25 +222,40 @@ function newViewport () {
}
function fitIntoVisibleArea (point) {
/* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
if (point.x > thisObject.visibleArea.bottomRight.x + 1) {
point.x = thisObject.visibleArea.bottomRight.x + 1
let pointCopy = {
x: point.x,
y: point.y
}
if (point.x < thisObject.visibleArea.topLeft.x - 1) {
point.x = thisObject.visibleArea.topLeft.x - 1
/* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
if (pointCopy.x > thisObject.visibleArea.bottomRight.x + 1) {
pointCopy.x = thisObject.visibleArea.bottomRight.x + 1
}
if (point.y > thisObject.visibleArea.bottomRight.y + 1) {
point.y = thisObject.visibleArea.bottomRight.y + 1
if (pointCopy.x < thisObject.visibleArea.topLeft.x - 1) {
pointCopy.x = thisObject.visibleArea.topLeft.x - 1
}
if (point.y < thisObject.visibleArea.topLeft.y - 1) {
point.y = thisObject.visibleArea.topLeft.y - 1
if (pointCopy.y > thisObject.visibleArea.bottomRight.y + 1) {
pointCopy.y = thisObject.visibleArea.bottomRight.y + 1
}
return point
if (pointCopy.y < thisObject.visibleArea.topLeft.y - 1) {
pointCopy.y = thisObject.visibleArea.topLeft.y - 1
}
return pointCopy
}
function fitIntoViewport (point) {
let pointCopy = {
x: point.x,
y: point.y
}
if (pointCopy.y > COCKPIT_SPACE_POSITION) {
pointCopy.y = COCKPIT_SPACE_POSITION
}
return pointCopy
}
function displace (displaceVector, recalculate) {
@@ -310,11 +328,15 @@ function newViewport () {
}
function isThisPointVisible (point) {
if (visibleArea === undefined) {
getVisibleArea()
if (point.x < thisObject.visibleArea.topLeft.x || point.x > thisObject.visibleArea.bottomRight.x || point.y < thisObject.visibleArea.topLeft.y || point.y > thisObject.visibleArea.bottomRight.y) {
return false
} else {
return true
}
}
if (point.x < visibleArea.topLeft.x || point.x > visibleArea.bottomRight.x || point.y < visibleArea.topLeft.y || point.y > visibleArea.bottomRight.y) {
function isThisPointInViewport (point) {
if (point.y > COCKPIT_SPACE_POSITION) {
return false
} else {
return true
DesignerSpace/Workspace/FunctionLibraries/ChainAttachDetach.js → DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/NodeChildren.js → DesignSpace/Workspace/FunctionLibraries/NodeChildren.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/NodeCloning.js → DesignSpace/Workspace/FunctionLibraries/NodeCloning.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/NodeDeleter.js → DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/OnFocus.js → DesignSpace/Workspace/FunctionLibraries/OnFocus.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/ProtocolNode.js → DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js → DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/SessionFunctions.js → DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/ShortcutKeys.js → DesignSpace/Workspace/FunctionLibraries/ShortcutKeys.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/TaskFunctions.js → DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js
View File
File renamed without changes.
DesignerSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js → DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
+1 -1
View File
@@ -384,7 +384,7 @@ function newUiObjectsFromNodes () {
payload.node = node
payload.parentNode = parentNode
payload.chainParent = chainParent
payload.onMenuItemClick = canvas.designerSpace.workspace.onMenuItemClick
payload.onMenuItemClick = canvas.designSpace.workspace.onMenuItemClick
node.payload = payload
node.type = uiObjectType
DesignerSpace/Workspace/Workspace.js → DesignSpace/Workspace/Workspace.js
+30 -12
View File
@@ -87,6 +87,8 @@ function newWorkspace () {
}
functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
thisObject.enabled = true
setInterval(saveWorkspace, 5000)
} catch (err) {
if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
}
@@ -108,11 +110,13 @@ function newWorkspace () {
functionLibraryReferenceAttachDetach.referenceAttachNode(node, attachToNode, thisObject.workspaceNode.rootNodes)
}
function physics () {
if (thisObject.enabled !== true) { return }
function saveWorkspace () {
let textToSave = stringifyWorkspace()
window.localStorage.setItem(CANVAS_APP_NAME + '.' + 'Workspace', textToSave)
}
function physics () {
if (thisObject.enabled !== true) { return }
if (workingAtTask > 0) {
circularProgressBar.physics()
@@ -136,7 +140,7 @@ function newWorkspace () {
workingAtTask++
break
case 5:
canvas.chartSpace.reset()
canvas.chartingSpace.reset()
workingAtTask++
break
case 6:
@@ -178,9 +182,23 @@ function newWorkspace () {
if (rootNode.networkNodes !== undefined) {
for (let j = 0; j < rootNode.networkNodes.length; j++) {
let networkNode = rootNode.networkNodes[j]
for (let i = 0; i < networkNode.taskManagers.length; i++) {
let taskManager = networkNode.taskManagers[i]
taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
if (networkNode.dataMining !== undefined) {
for (let i = 0; i < networkNode.dataMining.taskManagers.length; i++) {
let taskManager = networkNode.dataMining.taskManagers[i]
taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
}
}
if (networkNode.testingEnvironment !== undefined) {
for (let i = 0; i < networkNode.testingEnvironment.taskManagers.length; i++) {
let taskManager = networkNode.testingEnvironment.taskManagers[i]
taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
}
}
if (networkNode.productionEnvironment !== undefined) {
for (let i = 0; i < networkNode.productionEnvironment.taskManagers.length; i++) {
let taskManager = networkNode.productionEnvironment.taskManagers[i]
taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
}
}
}
}
@@ -260,14 +278,14 @@ function newWorkspace () {
{
let text = stringifyWorkspace(true)
let fileName = 'Share - ' + payload.node.type + ' - ' + payload.node.name + '.json'
download(fileName, text)
downloadText(fileName, text)
}
break
case 'Backup Workspace':
{
let text = stringifyWorkspace(false)
let fileName = 'Backup - ' + payload.node.type + ' - ' + payload.node.name + '.json'
download(fileName, text)
downloadText(fileName, text)
}
break
case 'Edit Code':
@@ -284,7 +302,7 @@ function newWorkspace () {
nodeName = '.' + nodeName
}
let fileName = 'Share - ' + payload.node.type + ' - ' + nodeName + '.json'
download(fileName, text)
downloadText(fileName, text)
}
break
@@ -299,7 +317,7 @@ function newWorkspace () {
nodeName = ' ' + nodeName
}
let fileName = 'Backup - ' + payload.node.type + ' - ' + nodeName + '.json'
download(fileName, text)
downloadText(fileName, text)
}
break
@@ -314,7 +332,7 @@ function newWorkspace () {
nodeName = ' ' + nodeName
}
let fileName = 'Clone - ' + payload.node.type + ' - ' + nodeName + '.json'
download(fileName, text)
downloadText(fileName, text)
}
break
FloatingSpace/CircularMenuItem.js
+14 -14
View File
@@ -203,19 +203,19 @@ function newCircularMenuItem () {
temporaryStatus === STATUS_SECONDARY_WORK_FAILED
) && thisObject.secondaryAction !== undefined
) {
thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.secondaryIcon)
thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.secondaryIcon)
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
} else {
if (thisObject.relatedUiObject !== undefined) {
thisObject.iconOn = canvas.designerSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
thisObject.iconOff = canvas.designerSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
thisObject.iconOn = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
thisObject.iconOff = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
} else {
if (thisObject.iconPathOn !== undefined && thisObject.iconPathOff !== undefined) {
thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.iconPathOn)
thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.iconPathOff)
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.iconPathOn)
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.iconPathOff)
} else {
thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
}
}
}
@@ -307,7 +307,7 @@ function newCircularMenuItem () {
if (event !== undefined) {
if (event.type === 'Secondary Action Already Executed') {
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_SECONDARY_WORK_DONE)
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
return
}
}
@@ -316,11 +316,11 @@ function newCircularMenuItem () {
if (thisObject.secondaryAction === undefined) { // This means there are no more possible actions.
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
if (thisObject.workDoneLabel !== undefined) {
setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_PRIMARY_WORK_DONE)
setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_PRIMARY_WORK_DONE)
}
} else {
if (thisObject.workFailedLabel != undefined) {
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_PRIMARY_WORK_FAILED)
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
}
}
} else {
@@ -331,7 +331,7 @@ function newCircularMenuItem () {
}
} else {
if (thisObject.workFailedLabel != undefined) {
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_PRIMARY_WORK_FAILED)
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
}
}
}
@@ -339,11 +339,11 @@ function newCircularMenuItem () {
function onSecondaryCallBack (err) {
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
if (thisObject.secondaryWorkDoneLabel !== undefined) {
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_SECONDARY_WORK_DONE)
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
}
} else {
if (thisObject.secondaryWorkFailedLabel != undefined) {
setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_SECONDARY_WORK_FAILED)
setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_SECONDARY_WORK_FAILED)
}
}
}
FloatingSpace/FloatingObject.js
+1 -1
View File
@@ -261,7 +261,7 @@ function newFloatingObject () {
if (parent.payload.position === undefined) { return }
let distanceToParent = Math.sqrt(Math.pow(parent.payload.position.x - thisObject.container.frame.position.x, 2) + Math.pow(parent.payload.position.y - thisObject.container.frame.position.y, 2)) // ... we calculate the distance ...
let parentChildren = canvas.designerSpace.workspace.nodeChildren.childrenCount(parent, thisObject.payload.node)
let parentChildren = canvas.designSpace.workspace.nodeChildren.childrenCount(parent, thisObject.payload.node)
let axisCount = parentChildren.childrenCount
let axisIndex = parentChildren.childIndex
let baseAngle = 0
FloatingSpace/UiObject.js
+7 -7
View File
@@ -427,7 +427,7 @@ function newUiObject () {
if (previousDistanceToChainParent !== undefined) {
if (ratio > THRESHOLD) {
canvas.designerSpace.workspace.chainDetachNode(thisObject.payload.node)
canvas.designSpace.workspace.chainDetachNode(thisObject.payload.node)
}
}
}
@@ -534,7 +534,7 @@ function newUiObject () {
if (previousDistanceToReferenceParent !== undefined) {
if (ratio > THRESHOLD) {
canvas.designerSpace.workspace.referenceDetachNode(thisObject.payload.node)
canvas.designSpace.workspace.referenceDetachNode(thisObject.payload.node)
}
}
}
@@ -657,7 +657,7 @@ function newUiObject () {
}
function iconPhysics () {
icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
if (nodeDefinition.alternativeIcons !== undefined) {
let nodeToUse = thisObject.payload.node
@@ -685,7 +685,7 @@ function newUiObject () {
iconName = alternativeIcon.iconName
}
}
let newIcon = canvas.designerSpace.iconCollection.get(iconName)
let newIcon = canvas.designSpace.iconCollection.get(iconName)
if (newIcon !== undefined) {
icon = newIcon
}
@@ -694,7 +694,7 @@ function newUiObject () {
}
}
executingIcon = canvas.designerSpace.iconCollection.get('attractive')
executingIcon = canvas.designSpace.iconCollection.get('attractive')
}
function onFocus () {
@@ -748,12 +748,12 @@ function newUiObject () {
function onDragFinished (event) {
if (isChainAttaching === true) {
canvas.designerSpace.workspace.chainAttachNode(thisObject.payload.node, chainAttachToNode)
canvas.designSpace.workspace.chainAttachNode(thisObject.payload.node, chainAttachToNode)
chainAttachToNode = undefined
isChainAttaching = false
}
if (isReferenceAttaching === true) {
canvas.designerSpace.workspace.referenceAttachNode(thisObject.payload.node, referenceAttachToNode)
canvas.designSpace.workspace.referenceAttachNode(thisObject.payload.node, referenceAttachToNode)
referenceAttachToNode = undefined
isReferenceAttaching = false
}
FloatingSpace/UiObjectConstructor.js
+8 -7
View File
@@ -327,6 +327,7 @@ function newUiObjectConstructor () {
function setFloatingObjectBasicProperties (floatingObject, payload) {
const FRICTION = 0.95
const INITIAL_FRICTION = 0.97
const INITIAL_FONT_SIZE = 12
switch (payload.node.type) {
case 'Workspace': {
@@ -375,7 +376,7 @@ function newUiObjectConstructor () {
floatingObject.initializeMass(500)
floatingObject.initializeRadius(45)
floatingObject.initializeImageSize(80)
floatingObject.initializeFontSize(10)
floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
}
@@ -386,7 +387,7 @@ function newUiObjectConstructor () {
floatingObject.initializeMass(600)
floatingObject.initializeRadius(45)
floatingObject.initializeImageSize(80)
floatingObject.initializeFontSize(10)
floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
@@ -401,7 +402,7 @@ function newUiObjectConstructor () {
floatingObject.initializeMass(300)
floatingObject.initializeRadius(40)
floatingObject.initializeImageSize(70)
floatingObject.initializeFontSize(10)
floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'
@@ -416,7 +417,7 @@ function newUiObjectConstructor () {
floatingObject.initializeMass(150)
floatingObject.initializeRadius(35)
floatingObject.initializeImageSize(60)
floatingObject.initializeFontSize(10)
floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
@@ -431,7 +432,7 @@ function newUiObjectConstructor () {
floatingObject.initializeMass(75)
floatingObject.initializeRadius(30)
floatingObject.initializeImageSize(50)
floatingObject.initializeFontSize(10)
floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
@@ -446,7 +447,7 @@ function newUiObjectConstructor () {
floatingObject.initializeMass(50)
floatingObject.initializeRadius(25)
floatingObject.initializeImageSize(40)
floatingObject.initializeFontSize(10)
floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
}
@@ -457,7 +458,7 @@ function newUiObjectConstructor () {
floatingObject.initializeMass(25)
floatingObject.initializeRadius(20)
floatingObject.initializeImageSize(30)
floatingObject.initializeFontSize(10)
floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
}
FloatingSpace/UiObjectTitle.js
+1 -1
View File
@@ -273,7 +273,7 @@ function newUiObjectTitle () {
label = trimTitle(label)
labelPoint = {
x: 0,
x: 5,
y: thisObject.container.frame.height * 0.8
}
Frame.js
+8 -6
View File
@@ -52,7 +52,7 @@ function newFrame () {
}
function isInViewPort () {
/* This function is usefull to know if the object who has this frame is currently appearing at least in part at the canvas.chartSpace.viewport */
/* This function is usefull to know if the object who has this frame is currently appearing at least in part at the canvas.chartingSpace.viewport */
point1 = {
x: 0,
@@ -69,7 +69,7 @@ function newFrame () {
point1 = transformThisPoint(point1, thisObject.container)
point3 = transformThisPoint(point3, thisObject.container)
if (point1.x < canvas.chartSpace.viewport.visibleArea.topRight.x && point1.y < canvas.chartSpace.viewport.visibleArea.bottomRight.y && point3.x > canvas.chartSpace.viewport.visibleArea.bottomLeft.x && point3.y > canvas.chartSpace.viewport.visibleArea.topLeft.y) {
if (point1.x < canvas.chartingSpace.viewport.visibleArea.topRight.x && point1.y < canvas.chartingSpace.viewport.visibleArea.bottomRight.y && point3.x > canvas.chartingSpace.viewport.visibleArea.bottomLeft.x && point3.y > canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
return true
} else {
return false
@@ -160,11 +160,13 @@ function newFrame () {
return point
}
function isThisPointHere (point, outsideViewPort, dontTransform) {
// The second parameter is usefull when you want to check a point that you already know is outside the viewport.
function isThisPointHere (point, outsideViewPort, dontTransform, padding) {
// The second parameter is usefull when you want to check a point that you already know is outside the viewport.
// The padding is a distance to the borders of the container. Can be either negative (outside, to increase the cointainer size) or positive (inside to decrease the cointainer size)
if (padding === undefined) { padding = 0 }
/* We need not to modify the point received, so me make a copy of it. */
let checkPoint = {
x: point.x,
y: point.y
@@ -193,7 +195,7 @@ function newFrame () {
}
if (thisObject.type === 'Rectangle') {
if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) {
if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width - padding || checkPoint.y > thisObject.height - padding) {
return false
} else {
return true
Globals.js
+16 -8
View File
@@ -41,6 +41,11 @@ UI_FONT = {
SECONDARY: "Source Code Pro"
};
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
let FONT_ASPECT_RATIO = 0.32;
@@ -116,7 +121,7 @@ let dailyFilePeriods =
dailyFilePeriods = JSON.parse(dailyFilePeriods);
window.AT_BREAKPOINT = false;
SHOW_ANIMATION_PERFORMACE = false;
let testUser = window.localStorage.getItem("test_user")
let LOGGED_IN_USER_LOCAL_STORAGE_KEY
@@ -160,10 +165,10 @@ const _3_MINUTES_IN_MILISECONDS = 3 * 60 * 1000;
const _2_MINUTES_IN_MILISECONDS = 2 * 60 * 1000;
const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000;
let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at the canvas.chartSpace.viewport.initialize if the user had a prevous session with this same browser.
let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at the canvas.chartingSpace.viewport.initialize if the user had a prevous session with this same browser.
let INITIAL_ZOOM_LEVEL = -28.25 // This is the zoom level at the view port in which the APP starts.
let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS // This value will be overwritten at the canvas.chartSpace.viewport.initialize if the user had a prevous session with this same browser.
let VERY_LARGE_NUMBER = 100000000000
let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS // This value will be overwritten at the canvas.chartingSpace.viewport.initialize if the user had a prevous session with this same browser.
let VERY_LARGE_NUMBER = 100000000000000
let CURRENT_TOP_MARGIN = window.canvasApp.topMargin
let AT_FULL_SCREEN_MODE = false
@@ -175,7 +180,7 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj
const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
const MAX_PLOTABLE_DATE = maxDate;
const TOP_SPACE_HEIGHT = 2
const TOP_SPACE_HEIGHT = 40
const COCKPIT_SPACE_HEIGHT = 30;
const BREAKPOINT_HEIGHT = 15;
const SIDE_PANEL_WIDTH = 450
@@ -202,11 +207,14 @@ const PERIOD_05_MIN = "05-min";
const PERIOD_01_MIN = "01-min";
/*
We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
We define here the size of the chartingSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
*/
const TIME_MACHINE_WIDTH = 250;
const TIME_MACHINE_HEIGHT = 250 / 50;
const TIME_MACHINE_WIDTH = 320;
const TIME_MACHINE_HEIGHT = 120;
let mediaRecorder // to downloadText canvas animation as a mediaRecorder
let areWeRecording = false
function toRadians(angle) {
return angle * (Math.PI / 180);
Panels/Layer.js
+3 -3
View File
@@ -472,7 +472,7 @@ function newLayer () {
let icon2
if (plotterModule.code.icon !== undefined) {
icon2 = canvas.designerSpace.iconCollection.get(plotterModule.code.icon)
icon2 = canvas.designSpace.iconCollection.get(plotterModule.code.icon)
}
let icon3 = getIcon(baseAsset)
@@ -490,9 +490,9 @@ function newLayer () {
}
}
if (iconName !== undefined) {
icon = canvas.designerSpace.iconCollection.get(iconName)
icon = canvas.designSpace.iconCollection.get(iconName)
} else {
icon = canvas.designerSpace.iconCollection.get(nodeDefinition.icon)
icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon)
}
return icon
}
Panels/LayersPanel.js
+11 -9
View File
@@ -27,7 +27,6 @@ function newLayersPanel () {
const LAYER_SEPARATION = 0
let visible = true
let headerHeight = 40
let footerHeight = 10
let layerHeight = 70
@@ -61,8 +60,8 @@ function newLayersPanel () {
thisObject.container.frame.height = headerHeight
let position = { // Default position
x: canvas.chartSpace.viewport.visibleArea.topLeft.x,
y: canvas.chartSpace.viewport.visibleArea.topLeft.y
x: canvas.chartingSpace.viewport.visibleArea.topLeft.x,
y: canvas.chartingSpace.viewport.visibleArea.topLeft.y
}
thisObject.container.frame.position = position
@@ -188,12 +187,14 @@ function newLayersPanel () {
}
function panelSizePhysics () {
let viewPortHeight = canvas.chartSpace.viewport.visibleArea.bottomLeft.y - canvas.chartSpace.viewport.visibleArea.topLeft.y
if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
let viewPortHeight = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y
if (viewPortHeight < headerHeight) {
visible = false
thisObject.visible = false
} else {
visible = true
thisObject.visible = true
}
if (desiredPanelHeight > viewPortHeight) {
@@ -239,6 +240,7 @@ function newLayersPanel () {
}
function getContainer (point) {
if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
let container
container = thisObject.panelTabButton.getContainer(point)
@@ -367,7 +369,7 @@ function newLayersPanel () {
}
function draw () {
if (isInitialized === false || visible === false) { return }
if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
// thisObject.container.frame.draw(false, false, false, thisObject.fitFunction)
@@ -384,8 +386,8 @@ function newLayersPanel () {
let label2 = thisObject.payload.node.payload.parentNode.name.substring(0, 18)
let label3 = ''
let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
let backgroundColor = UI_COLOR.BLACK
Panels/PanelTabButton.js
+3 -3
View File
@@ -58,7 +58,7 @@ function newPanelTabButton () {
upPosition.y = thisObject.parentContainer.frame.position.y
downPosition.x = thisObject.parentContainer.frame.position.x
downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
transitionPosition.x = upPosition.x
transitionPosition.y = upPosition.y
@@ -96,10 +96,10 @@ function newPanelTabButton () {
if (isInitialized === false) { return }
upPosition.x = thisObject.parentContainer.frame.position.x
upPosition.y = canvas.chartSpace.viewport.visibleArea.topRight.y
upPosition.y = canvas.chartingSpace.viewport.visibleArea.topRight.y
downPosition.x = thisObject.parentContainer.frame.position.x
downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
if (thisObject.status === 'going down') {
if (transitionPosition.y < downPosition.y) {
Panels/PanelsVisibleButton.js
+3 -2
View File
@@ -16,6 +16,7 @@ function newPanelsVisibleButton () {
thisObject.container.name = 'Panels Visible Button'
thisObject.container.initialize()
thisObject.container.isClickeable = true
thisObject.container.isDraggeable = false
thisObject.container.frame.containerName = 'Panels Visible Button'
let onMouseClickEventSuscriptionId
@@ -73,9 +74,9 @@ function newPanelsVisibleButton () {
function draw () {
let icon
if (thisObject.showPanels === true) {
icon = canvas.designerSpace.iconCollection.get('plotter-panel')
icon = canvas.designSpace.iconCollection.get('plotter-panel')
} else {
icon = canvas.designerSpace.iconCollection.get('social-bot')
icon = canvas.designSpace.iconCollection.get('toggle-panel-off')
}
drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
Panels/PlotterPanel.js
+2 -2
View File
@@ -47,8 +47,8 @@ function newPlotterPanel () {
thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL
thisObject.container.frame.position.x = canvas.chartSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
thisObject.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
panelTabButton = newPanelTabButton()
panelTabButton.parentContainer = thisObject.container
Plotter.js
+27 -18
View File
@@ -8,6 +8,7 @@ function newPlotter () {
let thisObject = {
currentRecord: undefined,
container: undefined,
fitFunction: undefined,
onDailyFileLoaded: onDailyFileLoaded,
initialize: initialize,
finalize: finalize,
@@ -24,7 +25,7 @@ function newPlotter () {
let coordinateSystem
let plotterModuleConfig
let slotHeight = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topLeft.y) / 10 // This is the amount of slots available
let slotHeight = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y) / 10 // This is the amount of slots available
let mustRecalculateDataPoints = false
let atMousePositionFillStyles = new Map()
let atMousePositionStrokeStyles = new Map()
@@ -60,13 +61,14 @@ function newPlotter () {
try {
/* Stop listening to the necesary events. */
thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
canvas.chartSpace.viewport.eventHandler.stopListening(zoomChangedEventSubscriptionId)
canvas.chartSpace.viewport.eventHandler.stopListening(offsetChangedEventSubscriptionId)
canvas.chartingSpace.viewport.eventHandler.stopListening(zoomChangedEventSubscriptionId)
canvas.chartingSpace.viewport.eventHandler.stopListening(offsetChangedEventSubscriptionId)
canvas.eventHandler.stopListening(dragFinishedEventSubscriptionId)
thisObject.container.eventHandler.stopListening(dimmensionsChangedEventSubscriptionId)
marketFiles.eventHandler.stopListening(marketFilesUpdatedEventSubscriptionId)
dailyFiles.eventHandler.stopListening(dailyFilesUpdatedEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onDisplaceEventSubscriptionId)
thisObject.fitFunction = undefined
/* Clear References */
marketFiles = undefined
@@ -111,8 +113,8 @@ function newPlotter () {
fileCursor = dailyFiles.getFileCursor(pTimeFrame)
/* Listen to the necesary events. */
zoomChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
offsetChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
zoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
offsetChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
dragFinishedEventSubscriptionId = canvas.eventHandler.listenToEvent('Drag Finished', onDragFinished)
marketFilesUpdatedEventSubscriptionId = marketFiles.eventHandler.listenToEvent('Files Updated', onMarketFilesUpdated)
dailyFilesUpdatedEventSubscriptionId = dailyFiles.eventHandler.listenToEvent('Files Updated', onDailyFilesUpdated)
@@ -146,7 +148,7 @@ function newPlotter () {
}
function onMouseOver (event) {
let userPosition = getDateFromPoint(event, thisObject.container, coordinateSystem)
let userPosition = getDateFromPointAtBrowserCanvas(event, thisObject.container, coordinateSystem)
userPositionDate = userPosition.valueOf()
}
@@ -374,8 +376,8 @@ function newPlotter () {
let daysOnSides = getSideDays(timeFrame)
let leftDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
let rightDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
let dateDiff = rightDate.valueOf() - leftDate.valueOf()
@@ -427,8 +429,8 @@ function newPlotter () {
let daysOnSides = getSideDays(timeFrame)
let leftDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
let rightDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
let dateDiff = rightDate.valueOf() - leftDate.valueOf()
@@ -518,13 +520,13 @@ function newPlotter () {
beginPoint = transformThisPoint(beginPoint, thisObject.container)
endPoint = transformThisPoint(endPoint, thisObject.container)
beginPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(beginPoint)
endPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(endPoint)
beginPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(beginPoint)
endPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(endPoint)
beginPoint = thisObject.fitFunction(beginPoint)
endPoint = thisObject.fitFunction(endPoint)
if (endPoint.x < canvas.chartSpace.viewport.visibleArea.bottomLeft.x || beginPoint.x > canvas.chartSpace.viewport.visibleArea.bottomRight.x) {
if (endPoint.x < canvas.chartingSpace.viewport.visibleArea.bottomLeft.x || beginPoint.x > canvas.chartingSpace.viewport.visibleArea.bottomRight.x) {
continue
}
@@ -545,7 +547,6 @@ function newPlotter () {
if (productDefinition.referenceParent.shapes === undefined) { continue }
if (productDefinition.referenceParent.shapes.chartPoints === undefined) { continue }
let dataPoints = new Map()
if (record.dataPoints !== undefined && mustRecalculateDataPoints === false) {
/* We use the datapoints already calculated. */
@@ -567,6 +568,8 @@ function newPlotter () {
x: x,
y: y
}
/* Contributing to Auto-Scale */
coordinateSystem.reportYValue(dataPoint.y)
/*
The information we store in files is independent from the charing system and its coordinate systems.
@@ -574,7 +577,7 @@ function newPlotter () {
*/
dataPoint = coordinateSystem.transformThisPoint(dataPoint)
dataPoint = transformThisPoint(dataPoint, thisObject.container)
dataPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(dataPoint)
dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
dataPoint = thisObject.fitFunction(dataPoint)
/* Store the data point at the local map */
@@ -583,7 +586,7 @@ function newPlotter () {
if (plotterModuleConfig !== undefined) {
if (plotterModuleConfig.slot !== undefined) {
/* We reset the y coordinate since it will be transformed with another coordinate system to fit into a slot. */
dataPoint.y = (-1) * y * coordinateSystem.scale.y + (plotterModuleConfig.slot.number - 1) * slotHeight + canvas.chartSpace.viewport.visibleArea.topLeft.y
dataPoint.y = (-1) * y * coordinateSystem.scale.y + (plotterModuleConfig.slot.number - 1) * slotHeight + canvas.chartingSpace.viewport.visibleArea.topLeft.y
}
}
}
@@ -723,7 +726,8 @@ function newPlotter () {
y: dataPointObject.y
}
/* We make sure the points do not fall outside the viewport visible area. This step allways need to be done. */
dataPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(dataPoint)
dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
dataPoint = thisObject.fitFunction(dataPoint)
if (k === 0) {
browserCanvasContext.moveTo(dataPoint.x, dataPoint.y)
} else {
@@ -765,7 +769,12 @@ function newPlotter () {
}
}
mustRecalculateDataPoints = false
if (coordinateSystem.autoMinYScale === true || coordinateSystem.autosMaxScale === true) {
mustRecalculateDataPoints = true
} else {
mustRecalculateDataPoints = false
}
logged = false
} catch (err) {
if (ERROR_LOG === true) { logger.write('[ERROR] plotChart -> err = ' + err.stack) }
Dashboard.js → PostLoader.js
+1 -13
View File
@@ -45,18 +45,6 @@ function newDashboard () {
if (canvas !== undefined) { canvas.finalize() }
/* Here we check where we are executing. In case we are Local we need to create a Local Dummy User and Data Mine. */
if (window.canvasApp.executingAt === 'Local') {
window.localStorage.setItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY, 'Local Access Token') // Dummy Access Token
window.localStorage.setItem(LOGGED_IN_USER_LOCAL_STORAGE_KEY, '{"authId":"x|x","alias":"user"}') // Dummy Local User
}
/* Here we used to have a call to the DataMines Module to get the profile pictures. That was removed but to keep things working, we do this: */
window.canvasApp.context.dataMineProfileImages = new Map()
window.canvasApp.context.fbProfileImages = new Map()
setTimeout(delayedStart, DEBUG_START_UP_DELAY)
}
} catch (err) {
@@ -88,7 +76,7 @@ function newDashboard () {
function setBrowserEvents () {
window.onbeforeunload = onBrowserClosed
function onBrowserClosed () {
// canvas.designerSpace.workspace.stopAllRunningTasks()
// canvas.designSpace.workspace.stopAllRunningTasks()
}
}
}
Project.njsproj
+1 -1
View File
@@ -145,7 +145,7 @@
<Compile Include="Candle.js" />
<Compile Include="Canvas.js" />
<Compile Include="Scales\ChartGrid.js" />
<Compile Include="Spaces\ChartSpace.js" />
<Compile Include="Spaces\ChartingSpace.js" />
<Compile Include="ChartUtilities.js" />
<Compile Include="Container.js" />
<Compile Include="Dashboard.js" />
Scales/AutoScaleButton.js
+194
View File
@@ -0,0 +1,194 @@
function newAutoScaleButton () {
let thisObject = {
container: undefined,
fitFunction: undefined,
parentContainer: undefined,
autoMinScale: undefined,
autoMaxScale: undefined,
setStatus: setStatus,
draw: draw,
getContainer: getContainer, // returns the inner most container that holds the point received by parameter.
initialize: initialize,
finalize: finalize
}
/* Cointainer stuff */
thisObject.container = newContainer()
thisObject.container.name = 'Auto Scale Button'
thisObject.container.initialize()
thisObject.container.isClickeable = true
thisObject.container.isDraggeable = false
thisObject.container.frame.containerName = 'Auto Scale Button'
const ICON_SIZE = 36
let onMouseWheelEventSubscriptionId
let coordinateSystem
let axis
let currentStatus
return thisObject
function finalize () {
thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
thisObject.container.finalize()
thisObject.container = undefined
thisObject.fitFunction = undefined
thisObject.parentContainer = undefined
thisObject.panels = undefined
coordinateSystem = undefined
axis = undefined
}
function initialize (pAxis, pCoordinateSystem) {
axis = pAxis
coordinateSystem = pCoordinateSystem
thisObject.autoMinScale = coordinateSystem.autoMinYScale
thisObject.autoMaxScale = coordinateSystem.autoMaxYScale
switch (axis) {
case 'X': {
thisObject.container.frame.width = ICON_SIZE
thisObject.container.frame.height = ICON_SIZE
let position = {
x: thisObject.container.parentContainer.frame.width * 7 / 8,
y: thisObject.container.parentContainer.frame.height / 2
}
thisObject.container.frame.position = position
break
}
case 'Y': {
thisObject.container.frame.width = ICON_SIZE
thisObject.container.frame.height = ICON_SIZE
let position = {
x: thisObject.container.parentContainer.frame.width * 7 / 8,
y: thisObject.container.parentContainer.frame.height / 2
}
thisObject.container.frame.position = position
break
}
}
onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
}
function setStatus (autoMinScale, autoMaxScale) {
thisObject.autoMinScale = autoMinScale
thisObject.autoMaxScale = autoMaxScale
if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
currentStatus = 1
}
if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
currentStatus = 2
}
if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
currentStatus = 3
}
if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
currentStatus = 4
}
}
function onMouseWheel (event) {
let factor
let delta = event.wheelDelta
if (delta < 0) {
delta = -1
} else {
delta = 1
}
currentStatus = currentStatus + delta
if (currentStatus === 5) { currentStatus = 1 }
if (currentStatus === 0) { currentStatus = 4 }
switch (currentStatus) {
case 1: {
thisObject.autoMinScale = false
thisObject.autoMaxScale = false
update()
return
}
case 2: {
thisObject.autoMinScale = true
thisObject.autoMaxScale = false
update()
return
}
case 3: {
thisObject.autoMinScale = false
thisObject.autoMaxScale = true
update()
return
}
case 4: {
thisObject.autoMinScale = true
thisObject.autoMaxScale = true
update()
return
}
}
function update () {
switch (axis) {
case 'X': {
coordinateSystem.autoMinXScale = thisObject.autoMinScale
coordinateSystem.autoMaxXScale = thisObject.autoMaxScale
break
}
case 'Y': {
coordinateSystem.autoMinYScale = thisObject.autoMinScale
coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
break
}
}
coordinateSystem.recalculateScale()
}
}
function getContainer (point, purpose) {
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
return thisObject.container
}
}
function draw () {
let icon
switch (axis) {
case 'X': {
if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-manual')
}
if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min')
}
if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-max')
}
if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min-max')
}
drawIcon(icon, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
break
}
case 'Y': {
if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-manual')
}
if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min')
}
if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-max')
}
if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
}
drawIcon(icon, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
break
}
}
}
}
Scales/RateScale.js
+133 -248
View File
@@ -6,13 +6,11 @@ function newRateScale () {
rate: undefined,
fitFunction: undefined,
payload: undefined,
scale: undefined,
offset: undefined,
minValue: undefined,
maxValue: undefined,
isVisible: true,
layersOn: undefined,
setScale: setScale,
onUpstreamScaleChanged: onUpstreamScaleChanged,
onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
physics: physics,
draw: draw,
@@ -22,18 +20,6 @@ function newRateScale () {
finalize: finalize
}
const DEFAULT_SCALE = 50
const STEP_SCALE = 1
const MIN_SCALE = 0
const MAX_SCALE = 100
const SNAP_THRESHOLD_SCALE = 1
const DEFAULT_OFFSET = 0
const STEP_OFFSET = 1
const MIN_OFFSET = -1000
const MAX_OFFSET = 1000
const SNAP_THRESHOLD_OFFSET = 3
thisObject.container = newContainer()
thisObject.container.initialize(MODULE_NAME)
@@ -45,7 +31,9 @@ function newRateScale () {
thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
thisObject.container.frame.height = 40
thisObject.offset = DEFAULT_OFFSET
let draggeableContainer = newContainer()
draggeableContainer.initialize(MODULE_NAME + ' Draggeable')
draggeableContainer.isDraggeable = true
let visible = true
let isMouseOver
@@ -53,6 +41,7 @@ function newRateScale () {
let onMouseWheelEventSubscriptionId
let onMouseOverEventSubscriptionId
let onMouseNotOverEventSubscriptionId
let onScaleChangedEventSubscriptionId
let coordinateSystem
let limitingContainer
@@ -65,14 +54,15 @@ function newRateScale () {
}
}
let offsetTimer = 0
let scaleTimer = 0
let scaleDisplayTimer = 0
let autoScaleButton
return thisObject
function finalize () {
thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
thisObject.container.finalize()
thisObject.container = undefined
@@ -83,6 +73,9 @@ function newRateScale () {
limitingContainer = undefined
rateCalculationsContainer = undefined
mouse = undefined
autoScaleButton.finalize()
autoScaleButton = undefined
}
function initialize (pCoordinateSystem, pLimitingContainer, pRateCalculationsContainer) {
@@ -96,13 +89,13 @@ function newRateScale () {
onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
autoScaleButton = newAutoScaleButton()
autoScaleButton.container.connectToParent(thisObject.container)
autoScaleButton.initialize('Y', coordinateSystem)
thisObject.scale = DEFAULT_SCALE
readObjectState()
let event = {}
event.scale = thisObject.scale
thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
}
function onMouseOverSomeTimeMachineContainer (event) {
@@ -125,6 +118,10 @@ function newRateScale () {
}
}
function onScaleChanged () {
saveObjectState()
}
function onMouseOver (event) {
isMouseOver = true
event.containerId = thisObject.container.id
@@ -133,80 +130,36 @@ function newRateScale () {
function onMouseNotOver () {
isMouseOver = false
offsetTimer = 0
scaleTimer = 0
scaleDisplayTimer = 0
}
function onMouseWheel (event) {
let morePower = 1
let delta
if (event.shiftKey === true) {
if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
delta = event.wheelDelta
if (delta < 0) {
thisObject.offset = thisObject.offset - STEP_OFFSET * morePower
if (thisObject.offset < MIN_OFFSET) { thisObject.offset = STEP_OFFSET }
} else {
thisObject.offset = thisObject.offset + STEP_OFFSET * morePower
if (thisObject.offset > MAX_OFFSET) { thisObject.offset = MAX_OFFSET }
}
if (
thisObject.offset <= DEFAULT_OFFSET + SNAP_THRESHOLD_OFFSET &&
thisObject.offset >= DEFAULT_OFFSET - SNAP_THRESHOLD_OFFSET
) {
event.offset = 0
} else {
event.offset = -thisObject.offset
}
event.isUserAction = true
thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event)
saveObjectState()
offsetTimer = 100
scaleTimer = 0
} else {
if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed.
delta = event.wheelDelta
if (delta < 0) {
thisObject.scale = thisObject.scale - STEP_SCALE * morePower
if (thisObject.scale < MIN_SCALE) { thisObject.scale = MIN_SCALE }
} else {
thisObject.scale = thisObject.scale + STEP_SCALE * morePower
if (thisObject.scale > MAX_SCALE) { thisObject.scale = MAX_SCALE }
}
finishScaleChange(event)
autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
return
}
}
function setScale (scale) {
thisObject.scale = scale
let event = {}
finishScaleChange(event)
}
let factor
let morePower = 10
if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
function finishScaleChange (event) {
if (
thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
) {
event.scale = DEFAULT_SCALE
let delta = event.wheelDelta
if (delta < 0) {
factor = -0.01 * morePower
} else {
event.scale = thisObject.scale
factor = 0.01 * morePower
}
event.isUserAction = true
thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
saveObjectState()
offsetTimer = 0
scaleTimer = 100
coordinateSystem.zoomY(factor, event, limitingContainer)
scaleDisplayTimer = 100
}
function getContainer (point) {
function getContainer (point, purpose) {
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
if (purpose === GET_CONTAINER_PURPOSE.DRAGGING) {
return draggeableContainer
}
return thisObject.container
}
}
@@ -214,11 +167,10 @@ function newRateScale () {
function saveObjectState () {
try {
let code = JSON.parse(thisObject.payload.node.code)
code.scale = thisObject.scale / MAX_SCALE * 100
code.scale = code.scale.toFixed(0)
code.offset = thisObject.offset
code.minValue = thisObject.minValue
code.maxValue = thisObject.maxValue
code.minValue = coordinateSystem.min.y
code.maxValue = coordinateSystem.max.y
code.autoMinScale = coordinateSystem.autoMinYScale
code.autoMaxScale = coordinateSystem.autoMaxYScale
thisObject.payload.node.code = JSON.stringify(code, null, 4)
} catch (err) {
// we ignore errors here since most likely they will be parsing errors.
@@ -229,60 +181,29 @@ function newRateScale () {
try {
let code = JSON.parse(thisObject.payload.node.code)
if (isNaN(code.scale) || code.scale === null || code.scale === undefined) {
// not using this value
} else {
code.scale = code.scale / 100 * MAX_SCALE
if (code.scale < MIN_SCALE) { code.scale = MIN_SCALE }
if (code.scale > MAX_SCALE) { code.scale = MAX_SCALE }
if (code.scale !== thisObject.scale) {
thisObject.scale = code.scale
let event = {}
if (
thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
) {
event.scale = DEFAULT_SCALE
} else {
event.scale = thisObject.scale
}
thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
}
}
if (isNaN(code.offset) || code.offset === null || code.offset === undefined) {
// not using this value
} else {
if (code.offset < MIN_OFFSET) { code.offset = MIN_OFFSET }
if (code.offset > MAX_OFFSET) { code.offset = MAX_OFFSET }
if (code.offset !== thisObject.offset) {
thisObject.offset = code.offset
let event = {}
if (
thisObject.offset <= DEFAULT_OFFSET + SNAP_THRESHOLD_OFFSET &&
thisObject.offset >= DEFAULT_OFFSET - SNAP_THRESHOLD_OFFSET
) {
event.offset = 0
} else {
event.offset = -thisObject.offset
}
thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event)
}
}
if (
(isNaN(code.minValue) || code.minValue === null || code.minValue === undefined) ||
(isNaN(code.maxValue) || code.maxValue === null || code.maxValue === undefined)
) {
// not using this value
} else {
if (thisObject.minValue !== code.minValue || thisObject.maxValue !== code.maxValue) {
if (
thisObject.minValue !== code.minValue ||
thisObject.maxValue !== code.maxValue ||
coordinateSystem.autoMinYScale !== code.autoMinScale ||
coordinateSystem.autoMaxYScale !== code.autoMaxScale
) {
thisObject.minValue = code.minValue
thisObject.maxValue = code.maxValue
coordinateSystem.min.y = thisObject.minValue
coordinateSystem.max.y = thisObject.maxValue
if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false) && code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
coordinateSystem.autoMinYScale = code.autoMinScale
coordinateSystem.autoMaxYScale = code.autoMaxScale
autoScaleButton.setStatus(code.autoMinScale, code.autoMaxScale)
}
coordinateSystem.recalculateScale()
}
}
@@ -293,10 +214,76 @@ function newRateScale () {
}
function physics () {
offsetTimer--
scaleTimer--
scaleDisplayTimer--
readObjectState()
positioningPhysics()
draggingPhysics()
}
function draggingPhysics () {
if (draggeableContainer.frame.position.y === 0) { return }
let dragVector = {
x: draggeableContainer.frame.position.x,
y: draggeableContainer.frame.position.y
}
draggeableContainer.frame.position.x = 0
draggeableContainer.frame.position.y = 0
let point = {
x: 0,
y: -dragVector.y
}
let newMaxRate = getRateFromPointAtContainer(point, limitingContainer, coordinateSystem)
let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
coordinateSystem.max.y = newMaxRate
coordinateSystem.recalculateScale()
}
function onUpstreamScaleChanged (event) {
if (event === undefined) { return }
if (event.type === 'center dragged') {
let point = {
x: event.dragVector.x,
y: -event.dragVector.y
}
let newMinDate = getDateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
let newMaxRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
coordinateSystem.min.x = newMinDate.valueOf()
coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
coordinateSystem.max.y = newMaxRate
coordinateSystem.recalculateScale()
}
if (event.type === 'top dragged') {
let point = {
x: event.dragVector.x,
y: event.dragVector.y
}
let newMaxRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
coordinateSystem.max.y = newMaxRate
coordinateSystem.maxHeight = rateCalculationsContainer.frame.height
coordinateSystem.recalculateScale()
}
if (event.type === 'bottom dragged') {
let point = {
x: event.dragVector.x,
y: event.dragVector.y + rateCalculationsContainer.frame.height
}
let newMinRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
coordinateSystem.min.y = newMinRate
coordinateSystem.maxHeight = rateCalculationsContainer.frame.height
coordinateSystem.recalculateScale()
}
}
function positioningPhysics () {
@@ -347,10 +334,10 @@ function newRateScale () {
/* Mouse Position Rate Calculation */
let ratePoint = {
x: 0,
y: mouse.position.y + thisObject.offset
y: mouse.position.y
}
thisObject.rate = getRateFromPoint(ratePoint, rateCalculationsContainer, coordinateSystem)
thisObject.rate = getRateFromPointAtBrowserCanvas(ratePoint, rateCalculationsContainer, coordinateSystem)
/* rateScale Positioning */
ratePoint = {
@@ -387,6 +374,7 @@ function newRateScale () {
function draw () {
drawScaleBox()
autoScaleButton.draw()
if (visible === false) {
drawScaleDisplayCover(thisObject.container)
}
@@ -395,12 +383,14 @@ function newRateScale () {
function drawForeground () {
if (isMouseOver === true) {
drawScaleBox()
drawArrows()
autoScaleButton.draw()
}
}
function drawScaleBox () {
if (thisObject.rate === undefined) { return }
if (thisObject.payload === undefined) { return }
if (thisObject.payload.node === undefined) { return }
let rate = thisObject.rate
@@ -416,123 +406,18 @@ function newRateScale () {
let label1 = thisObject.payload.node.payload.parentNode.name
let label2 = (Math.trunc(rate)).toLocaleString()
let label3 = labelArray[1]
if (label3 === undefined) { label3 = '00' }
let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
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 (offsetTimer > 0) {
label2 = thisObject.offset.toFixed(0)
label3 = 'OFFSET'
}
if (scaleTimer > 0) {
label2 = (thisObject.scale / MAX_SCALE * 100).toFixed(0)
if (scaleDisplayTimer > 0) {
label2 = (coordinateSystem.scale.y * 10000).toFixed(2)
label3 = 'SCALE'
}
drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
}
function drawArrows () {
if (visible === false || thisObject.rate === undefined) { return }
const X_OFFSET = thisObject.container.frame.width / 2
const Y_OFFSET = thisObject.container.frame.height / 2
const HEIGHT = 6
const WIDTH = 18
const LINE_WIDTH = 3
const OPACITY = 0.2
const DISTANCE_BETWEEN_ARROWS = 10
const MIN_DISTANCE_FROM_CENTER = 30
const CURRENT_SCALE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.scale
const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 215 + DISTANCE_BETWEEN_ARROWS
let ARROW_DIRECTION = 0
ARROW_DIRECTION = -1
drawTwoArrows()
ARROW_DIRECTION = 1
drawTwoArrows()
function drawTwoArrows () {
point1 = {
x: X_OFFSET - WIDTH / 2,
y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
}
point2 = {
x: X_OFFSET,
y: Y_OFFSET + HEIGHT * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
}
point3 = {
x: X_OFFSET + WIDTH / 2,
y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
}
point1 = thisObject.container.frame.frameThisPoint(point1)
point2 = thisObject.container.frame.frameThisPoint(point2)
point3 = thisObject.container.frame.frameThisPoint(point3)
point4 = {
x: X_OFFSET - WIDTH / 2,
y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
}
point5 = {
x: X_OFFSET,
y: Y_OFFSET + HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
}
point6 = {
x: X_OFFSET + WIDTH / 2,
y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
}
point4 = thisObject.container.frame.frameThisPoint(point4)
point5 = thisObject.container.frame.frameThisPoint(point5)
point6 = thisObject.container.frame.frameThisPoint(point6)
point7 = {
x: X_OFFSET - WIDTH / 2,
y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
}
point8 = {
x: X_OFFSET,
y: Y_OFFSET - HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
}
point9 = {
x: X_OFFSET + WIDTH / 2,
y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
}
point7 = thisObject.container.frame.frameThisPoint(point7)
point8 = thisObject.container.frame.frameThisPoint(point8)
point9 = thisObject.container.frame.frameThisPoint(point9)
browserCanvasContext.setLineDash([0, 0])
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(point1.x, point1.y)
browserCanvasContext.lineTo(point2.x, point2.y)
browserCanvasContext.lineTo(point3.x, point3.y)
browserCanvasContext.moveTo(point4.x, point4.y)
browserCanvasContext.lineTo(point5.x, point5.y)
browserCanvasContext.lineTo(point6.x, point6.y)
browserCanvasContext.moveTo(point7.x, point7.y)
browserCanvasContext.lineTo(point8.x, point8.y)
browserCanvasContext.lineTo(point9.x, point9.y)
browserCanvasContext.lineWidth = LINE_WIDTH
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
browserCanvasContext.stroke()
}
}
}
Scales/TimeFrameScale.js
+28 -10
View File
@@ -21,7 +21,8 @@ function newTimeFrameScale () {
const TIME_PERIOD_DEFAULT_VALUE = 0
const MIN_HEIGHT = 50
let visible = true
let previousIsVisible = true
let greyOutCoverLayer = false
let isMouseOver
let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
@@ -60,7 +61,7 @@ function newTimeFrameScale () {
function finalize () {
thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
@@ -80,7 +81,7 @@ function newTimeFrameScale () {
newTimeFrame()
onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
onViewportZoomChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
onViewportZoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
}
@@ -88,12 +89,12 @@ function newTimeFrameScale () {
function onMouseOverSomeTimeMachineContainer (event) {
if (event.containerId === undefined) {
/* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
visible = true
greyOutCoverLayer = false
} else {
if (event.containerId === thisObject.container.id) {
visible = true
greyOutCoverLayer = false
} else {
visible = false
greyOutCoverLayer = true
turnOnCounter = 0
}
}
@@ -118,6 +119,22 @@ function newTimeFrameScale () {
function physics () {
readObjectState()
positioningPhysics()
zoomOutPhysics()
}
function zoomOutPhysics () {
if ((thisObject.isVisible === true && previousIsVisible === false) && (canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
let event = {}
event.timeFrame = thisObject.timeFrame
thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
previousIsVisible = true
}
if ((thisObject.isVisible === false && previousIsVisible === true) || (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
let event = {}
event.timeFrame = ONE_DAY_IN_MILISECONDS
thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
previousIsVisible = false
}
}
function positioningPhysics () {
@@ -186,7 +203,8 @@ function newTimeFrameScale () {
thisObject.isVisible = true
thisObject.payload.isVisible = true
if (thisObject.container.frame.position.y + thisObject.container.frame.height > bottonCorner.y ||
thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y) {
thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y ||
thisObject.container.frame.position.x < upCorner.x) {
thisObject.isVisible = false
thisObject.payload.isVisible = false
}
@@ -303,7 +321,7 @@ function newTimeFrameScale () {
function draw () {
drawScaleBox()
if (visible === false) {
if (greyOutCoverLayer === true) {
drawScaleDisplayCover(thisObject.container)
}
}
@@ -322,8 +340,8 @@ function newTimeFrameScale () {
let label2 = label[0]
let label3 = label[1].toUpperCase()
let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
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
Scales/TimeScale.js
+45 -177
View File
@@ -2,7 +2,6 @@ function newTimeScale () {
const MODULE_NAME = 'Time Scale'
let thisObject = {
scale: undefined,
container: undefined,
date: undefined,
fitFunction: undefined,
@@ -19,12 +18,6 @@ function newTimeScale () {
finalize: finalize
}
const DEFAULT_SCALE = 0
const STEP_SCALE = 2.5
const MIN_SCALE = 0
const MAX_SCALE = 250
const SNAP_THRESHOLD_SCALE = 0
thisObject.container = newContainer()
thisObject.container.initialize(MODULE_NAME)
@@ -37,11 +30,13 @@ function newTimeScale () {
thisObject.container.frame.height = 40
let visible = true
let autoScaleButton
let isMouseOver
let onMouseWheelEventSubscriptionId
let onMouseOverEventSubscriptionId
let onMouseNotOverEventSubscriptionId
let onScaleChangedEventSubscriptionId
let coordinateSystem
let limitingContainer
@@ -52,13 +47,14 @@ function newTimeScale () {
y: 0
}
}
let scaleTimer = 0
return thisObject
function finalize () {
thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
thisObject.container.finalize()
thisObject.container = undefined
@@ -68,25 +64,25 @@ function newTimeScale () {
coordinateSystem = undefined
limitingContainer = undefined
mouse = undefined
autoScaleButton.finalize()
autoScaleButton = undefined
}
function initialize (pCoordinateSystem, pLimitingContainer) {
coordinateSystem = pCoordinateSystem
limitingContainer = pLimitingContainer
thisObject.fromDate = coordinateSystem.min.x
thisObject.toDate = coordinateSystem.max.x
onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
autoScaleButton = newAutoScaleButton()
autoScaleButton.container.connectToParent(thisObject.container)
autoScaleButton.initialize('X', coordinateSystem)
thisObject.scale = DEFAULT_SCALE
readObjectState()
let event = {}
event.scale = thisObject.scale
thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
}
function onMouseOverSomeTimeMachineContainer (event) {
@@ -117,39 +113,32 @@ function newTimeScale () {
function onMouseNotOver () {
isMouseOver = false
scaleTimer = 0
}
function onMouseWheel (event) {
let morePower = 1
if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed.
if (event.shiftKey === true) {
autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
return
}
let factor
let morePower = 10
if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
delta = event.wheelDelta
let delta = event.wheelDelta
if (delta < 0) {
thisObject.scale = thisObject.scale - STEP_SCALE * morePower
if (thisObject.scale < MIN_SCALE) { thisObject.scale = MIN_SCALE }
factor = -0.01 * morePower
} else {
thisObject.scale = thisObject.scale + STEP_SCALE * morePower
if (thisObject.scale > MAX_SCALE) { thisObject.scale = MAX_SCALE }
factor = 0.01 * morePower
}
if (
thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
) {
event.scale = DEFAULT_SCALE
} else {
event.scale = thisObject.scale
}
event.isUserAction = true
thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
saveObjectState()
scaleTimer = 100
coordinateSystem.zoomX(factor, event, limitingContainer, MODULE_NAME)
}
function getContainer (point) {
function onScaleChanged () {
saveObjectState()
}
function getContainer (point, purpose) {
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
return thisObject.container
}
@@ -158,10 +147,10 @@ function newTimeScale () {
function saveObjectState () {
try {
let code = JSON.parse(thisObject.payload.node.code)
code.scale = thisObject.scale / MAX_SCALE * 100
code.scale = code.scale.toFixed(0)
code.fromDate = (new Date(thisObject.fromDate)).toISOString()
code.toDate = (new Date(thisObject.toDate)).toISOString()
code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
code.autoMinScale = coordinateSystem.autoMinXScale
code.autoMaxScale = coordinateSystem.autoMaxXScale
thisObject.payload.node.code = JSON.stringify(code, null, 4)
} catch (err) {
// we ignore errors here since most likely they will be parsing errors.
@@ -172,28 +161,6 @@ function newTimeScale () {
try {
let code = JSON.parse(thisObject.payload.node.code)
if (isNaN(code.scale) || code.scale === null || code.scale === undefined) {
// not using this value
} else {
code.scale = code.scale / 100 * MAX_SCALE
if (code.scale < MIN_SCALE) { code.scale = MIN_SCALE }
if (code.scale > MAX_SCALE) { code.scale = MAX_SCALE }
if (code.scale !== thisObject.scale) {
thisObject.scale = code.scale
let event = {}
if (
thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
) {
event.scale = DEFAULT_SCALE
} else {
event.scale = thisObject.scale
}
thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
}
}
if (
(isNaN(Date.parse(code.fromDate)) || code.fromDate === null || code.fromDate === undefined) ||
(isNaN(Date.parse(code.toDate)) || code.toDate === null || code.toDate === undefined)
@@ -205,6 +172,12 @@ function newTimeScale () {
thisObject.toDate = Date.parse(code.toDate)
coordinateSystem.min.x = thisObject.fromDate
coordinateSystem.max.x = thisObject.toDate
if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false) && code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
coordinateSystem.autoMinXScale = code.autoMinScale
coordinateSystem.autoMaxXScale = code.autoMaxScale
autoScaleButton.setStatus(code.autoMinScale, code.autoMaxScale)
}
coordinateSystem.recalculateScale()
}
}
@@ -215,7 +188,6 @@ function newTimeScale () {
}
function physics () {
scaleTimer--
readObjectState()
positioningPhysics()
}
@@ -245,7 +217,7 @@ function newTimeScale () {
y: 0
}
let mouseDate = getDateFromPoint(timePoint, limitingContainer, coordinateSystem)
let mouseDate = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
thisObject.date = new Date(mouseDate)
@@ -269,13 +241,15 @@ function newTimeScale () {
thisObject.isVisible = true
if (thisObject.container.frame.position.y + thisObject.container.frame.height * 4 > bottonCorner.y ||
thisObject.container.frame.position.y < upCorner.y) {
thisObject.container.frame.position.y < upCorner.y ||
thisObject.container.frame.position.x < upCorner.x) {
thisObject.isVisible = false
}
}
function draw () {
drawScaleBox()
autoScaleButton.draw()
if (visible === false) {
drawScaleDisplayCover(thisObject.container)
}
@@ -284,7 +258,7 @@ function newTimeScale () {
function drawForeground () {
if (isMouseOver === true) {
drawScaleBox()
drawArrows()
autoScaleButton.draw()
}
}
@@ -297,117 +271,11 @@ function newTimeScale () {
let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
let label3 = labelArray[4]
let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
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 (scaleTimer > 0) {
label2 = (thisObject.scale / MAX_SCALE * 100).toFixed(0)
label3 = 'SCALE'
}
drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
}
function drawArrows () {
if (visible === false || thisObject.date === undefined) { return }
const X_OFFSET = thisObject.container.frame.width / 2
const Y_OFFSET = thisObject.container.frame.height / 2 - 10
const HEIGHT = 18
const WIDTH = 6
const LINE_WIDTH = 3
const OPACITY = 0.2
const DISTANCE_BETWEEN_ARROWS = 10
const MIN_DISTANCE_FROM_CENTER = 110
const CURRENT_SCALE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.scale
const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + MAX_SCALE + DISTANCE_BETWEEN_ARROWS
let ARROW_DIRECTION = 0
ARROW_DIRECTION = -1
drawTwoArrows()
ARROW_DIRECTION = 1
drawTwoArrows()
function drawTwoArrows () {
point1 = {
x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
y: Y_OFFSET - 0
}
point2 = {
x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
y: Y_OFFSET + HEIGHT / 2
}
point3 = {
x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
y: Y_OFFSET + HEIGHT
}
point1 = thisObject.container.frame.frameThisPoint(point1)
point2 = thisObject.container.frame.frameThisPoint(point2)
point3 = thisObject.container.frame.frameThisPoint(point3)
point4 = {
x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
y: Y_OFFSET - 0
}
point5 = {
x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
y: Y_OFFSET + HEIGHT / 2
}
point6 = {
x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
y: Y_OFFSET + HEIGHT
}
point4 = thisObject.container.frame.frameThisPoint(point4)
point5 = thisObject.container.frame.frameThisPoint(point5)
point6 = thisObject.container.frame.frameThisPoint(point6)
point7 = {
x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
y: Y_OFFSET - 0
}
point8 = {
x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
y: Y_OFFSET + HEIGHT / 2
}
point9 = {
x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
y: Y_OFFSET + HEIGHT
}
point7 = thisObject.container.frame.frameThisPoint(point7)
point8 = thisObject.container.frame.frameThisPoint(point8)
point9 = thisObject.container.frame.frameThisPoint(point9)
browserCanvasContext.setLineDash([0, 0])
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(point1.x, point1.y)
browserCanvasContext.lineTo(point2.x, point2.y)
browserCanvasContext.lineTo(point3.x, point3.y)
browserCanvasContext.moveTo(point4.x, point4.y)
browserCanvasContext.lineTo(point5.x, point5.y)
browserCanvasContext.lineTo(point6.x, point6.y)
browserCanvasContext.moveTo(point7.x, point7.y)
browserCanvasContext.lineTo(point8.x, point8.y)
browserCanvasContext.lineTo(point9.x, point9.y)
browserCanvasContext.lineWidth = LINE_WIDTH
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
browserCanvasContext.stroke()
}
}
}
Spaces/ChartSpace.js → Spaces/ChartingSpace.js
+40 -33
View File
@@ -6,8 +6,8 @@ changes, then all charts in it are replotted with the corresponging data.
*/
function newChartSpace () {
const MODULE_NAME = 'Chart Space'
function newChartingSpace () {
const MODULE_NAME = 'Charting Space'
const ERROR_LOG = true
const logger = newWebDebugLog()
logger.fileName = MODULE_NAME
@@ -84,7 +84,7 @@ function newChartSpace () {
}
function initialize () {
let rootNodes = canvas.designerSpace.workspace.workspaceNode.rootNodes
let rootNodes = canvas.designSpace.workspace.workspaceNode.rootNodes
for (let i = 0; i < rootNodes.length; i++) {
let rootNode = rootNodes[i]
if (rootNode.type === 'Charting Space') {
@@ -93,7 +93,7 @@ function newChartSpace () {
}
if (thisObject.payload === undefined) {
if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Designer Space in order to enable Charts. PLease create one and refreash your browser. ') }
if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Design Space in order to enable Charts. PLease create one and refreash your browser. ') }
return
}
@@ -112,6 +112,7 @@ function newChartSpace () {
function getContainer (point, purpose) {
if (thisObject.visible !== true) { return }
if (thisObject.viewport.isThisPointInViewport(point) === false) { return }
let container
@@ -123,25 +124,31 @@ function newChartSpace () {
}
}
/* Now we see which is the inner most container that has it */
/*
Now we see which is the inner most container that has it.
In this case we will ask all the time machines even if one of them already returned a matching container.
This will help the others know they are not on ofcus
*/
let containerFound
for (let i = 0; i < thisObject.timeMachines.length; i++) {
container = thisObject.timeMachines[i].getContainer(point, purpose)
if (container !== undefined) {
if (purpose !== undefined) {
if (container.isForThisPurpose(purpose)) {
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
return container
}
}
containerFound = container
} else {
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
return container
containerFound = container
}
}
}
}
if (containerFound !== undefined) {
containerFound.space = 'Charting Space'
return containerFound
}
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
thisObject.container.space = 'Charting Space'
return thisObject.container
} else {
return undefined
@@ -160,7 +167,7 @@ function newChartSpace () {
y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
}
canvas.chartSpace.viewport.displace(displaceVector)
canvas.chartingSpace.viewport.displace(displaceVector)
}
function oneScreenDown () {
@@ -169,7 +176,7 @@ function newChartSpace () {
y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
}
canvas.chartSpace.viewport.displace(displaceVector)
canvas.chartingSpace.viewport.displace(displaceVector)
}
function oneScreenLeft () {
@@ -178,7 +185,7 @@ function newChartSpace () {
y: 0
}
canvas.chartSpace.viewport.displace(displaceVector, true)
canvas.chartingSpace.viewport.displace(displaceVector, true)
}
function oneScreenRight () {
@@ -187,7 +194,7 @@ function newChartSpace () {
y: 0
}
canvas.chartSpace.viewport.displace(displaceVector, true)
canvas.chartingSpace.viewport.displace(displaceVector, true)
}
function fitFunction (point, fullVisible) {
@@ -258,16 +265,21 @@ function newChartSpace () {
if (thisObject.payload.node === undefined) { return }
syncWithDesignerLoop = syncWithDesignerLoop + 0.00000000001
if (thisObject.payload.node.timeMachines !== undefined) {
for (let j = 0; j < thisObject.payload.node.timeMachines.length; j++) {
let node = thisObject.payload.node.timeMachines[j]
let timeMachine = timeMachinesMap.get(node.id)
if (timeMachine === undefined) {
if (thisObject.payload.node.dashboards !== undefined) {
for (let i = 0; i < thisObject.payload.node.dashboards.length; i++) {
let dashboard = thisObject.payload.node.dashboards[i]
if (dashboard.timeMachines !== undefined) {
for (let j = 0; j < dashboard.timeMachines.length; j++) {
let node = dashboard.timeMachines[j]
let timeMachine = timeMachinesMap.get(node.id)
if (timeMachine === undefined) {
/* The time machine node is new, thus we need to initialize a new timeMachine */
initializeTimeMachine(node, syncWithDesignerLoop)
} else {
initializeTimeMachine(node, syncWithDesignerLoop)
} else {
/* The time machine already exists, we tag it as existing at the current loop. */
timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
}
}
}
}
}
@@ -302,16 +314,11 @@ function newChartSpace () {
timeMachine.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
timeMachine.initialize(onTimeMachineInitialized)
function onTimeMachineInitialized (err) {
if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
if (ERROR_LOG === true) { logger.write('[ERROR] syncWithDesigner -> initializeTimeMachine -> Initialization Failed. -> Err ' + err.message) }
return
}
function onTimeMachineInitialized () {
thisObject.timeMachines.push(timeMachine)
timeMachine.payload.uiObject.setValue('')
if (canvas.chartSpace.viewport !== undefined) {
canvas.chartSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
if (canvas.chartingSpace.viewport !== undefined) {
canvas.chartingSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
}
}
}
@@ -326,8 +333,8 @@ function newChartSpace () {
thisObject.visible = true
}
if (canvas.chartSpace.viewport !== undefined) {
canvas.chartSpace.viewport.resize()
if (canvas.chartingSpace.viewport !== undefined) {
canvas.chartingSpace.viewport.resize()
}
}
Spaces/CockpitSpace.js
+24 -12
View File
@@ -48,7 +48,7 @@
thisObject.container.frame.position.x = 0
let INITIAL_POSITION
if (canvas.designerSpace.workspace.enabled === true) {
if (canvas.designSpace.workspace.enabled === true) {
let localStorage = window.localStorage.getItem(MODULE_NAME)
if (localStorage !== null) {
storage = JSON.parse(localStorage)
@@ -80,10 +80,21 @@
function resize () {
thisObject.container.frame.width = browserCanvas.width
thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT
switch (thisObject.status) {
case 'BOTTOM': {
thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
break
}
case 'TOP': {
thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
break
}
}
}
function toTop () {
thisObject.container.frame.position.y = 0
thisObject.container.frame.position.y = COCKPIT_SPACE_HEIGHT
}
function toBottom () {
@@ -95,14 +106,14 @@
}
function moveUp () {
thisObject.container.frame.position.y = thisObject.container.frame.position.y - browserCanvas.height / 10
thisObject.container.frame.position.y = thisObject.container.frame.position.y - COCKPIT_SPACE_HEIGHT * 2
if (thisObject.container.frame.position.y < 0) {
thisObject.container.frame.position.y = 0
}
}
function moveDown () {
thisObject.container.frame.position.y = thisObject.container.frame.position.y + browserCanvas.height / 10
thisObject.container.frame.position.y = thisObject.container.frame.position.y + COCKPIT_SPACE_HEIGHT * 2
if (thisObject.container.frame.position.y > browserCanvas.height - COCKPIT_SPACE_HEIGHT) {
thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
}
@@ -121,7 +132,7 @@
thisObject.status = 'MIDDLE'
if (canvas.designerSpace.workspace.enabled === true) {
if (canvas.designSpace.workspace.enabled === true) {
thisObject.container.isDraggeable = true
} else {
thisObject.container.isDraggeable = false
@@ -130,15 +141,15 @@
if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) {
thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
thisObject.status = 'BOTTOM'
canvas.designerSpace.makeInvisible()
canvas.designSpace.makeInvisible()
canvas.floatingSpace.makeInvisible()
} else {
canvas.designerSpace.makeVisible()
canvas.designSpace.makeVisible()
canvas.floatingSpace.makeVisible()
}
if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) {
thisObject.container.frame.position.y = 0
if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100 + TOP_SPACE_HEIGHT) {
thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
thisObject.status = 'TOP'
canvas.panelsSpace.visible = false
} else {
@@ -150,8 +161,8 @@
spacePosition: COCKPIT_SPACE_POSITION
}
window.localStorage.setItem(MODULE_NAME, JSON.stringify(storage))
if (canvas.chartSpace.viewport !== undefined) {
canvas.chartSpace.viewport.resize()
if (canvas.chartingSpace.viewport !== undefined) {
canvas.chartingSpace.viewport.resize()
}
}
@@ -162,6 +173,7 @@
// if (container !== undefined) { return container }
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
thisObject.container.space = 'Cockpit Space'
return thisObject.container
} else {
return undefined
@@ -207,7 +219,7 @@
browserCanvasContext.closePath()
browserCanvasContext.fill()
if (canvas.designerSpace.workspace.enabled === true) {
if (canvas.designSpace.workspace.enabled === true) {
arrow()
}
}
Spaces/DesignerSpace.js → Spaces/DesignSpace.js
+30 -3
View File
@@ -1,5 +1,5 @@
function newDesignerSpace () {
function newDesignSpace () {
const MODULE_NAME = 'Strategy Space'
let thisObject = {
sidePanel: undefined,
@@ -241,7 +241,31 @@ function newDesignerSpace () {
'task-manager',
'session-based-data',
'session-independent-data',
'session-reference'
'session-reference',
'dashboard',
'toggle-auto-scale-manual',
'toggle-auto-scale-auto-min-max',
'toggle-auto-scale-auto-max',
'toggle-auto-scale-auto-min',
'toggle-panel-off',
'toggle-auto-time-scale-auto-min',
'toggle-auto-time-scale-auto-max',
'toggle-auto-time-scale-auto-min-max',
'toggle-auto-time-scale-manual',
'mouse-pointer',
'mouse-left-click',
'mouse-right-click',
'mouse-wheel-up',
'mouse-wheel-down',
'mouse-wheel-click',
'key-alt',
'key-shift',
'key-ctrl',
'hand-drag',
'key-down',
'key-left',
'key-right',
'key-up'
]
for (let i = 0; i < iconsNames.length; i++) {
@@ -280,7 +304,10 @@ function newDesignerSpace () {
if (thisObject.sidePanel !== undefined) {
container = thisObject.sidePanel.getContainer(point)
if (container !== undefined) { return container }
if (container !== undefined) {
container.space = 'Design Space'
return container
}
}
return
Spaces/FloatingSpace.js
+5 -1
View File
@@ -237,9 +237,13 @@ function newFloatingSpace () {
let container
container = thisObject.floatingLayer.getContainer(point)
if (container !== undefined) { return container }
if (container !== undefined) {
container.space = 'Floating Space'
return container
}
if (visible === true) {
thisObject.container.space = 'Floating Space'
return thisObject.container
}
}
Spaces/PanelsSpace.js
+32 -26
View File
@@ -8,8 +8,8 @@ function newPanelsSpace () {
let thisObject = {
visible: true,
container: undefined,
makeVisible: makeVisible,
makeInvisible: makeInvisible,
unHide: unHide,
hide: hide,
createNewPanel: createNewPanel,
destroyPanel: destroyPanel,
getPanel: getPanel,
@@ -43,8 +43,8 @@ function newPanelsSpace () {
case 'Layers Panel':
{
panel = newLayersPanel()
panel.fitFunction = canvas.chartSpace.fitFunction
panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
panel.fitFunction = canvas.chartingSpace.fitFunction
panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
panel.type = 'Layers Panel'
break
}
@@ -52,14 +52,14 @@ function newPanelsSpace () {
{
if (pParameters.panelNode.code.isLegacy !== true) {
panel = newPlotterPanel()
panel.fitFunction = canvas.chartSpace.fitFunction
panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
panel.fitFunction = canvas.chartingSpace.fitFunction
panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
panel.session = pSession
panel.initialize(pParameters.panelNode)
} else {
panel = getNewPlotterPanel(pParameters.dataMine, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelNode.code.codeName)
panel.fitFunction = canvas.chartSpace.fitFunction
panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
panel.fitFunction = canvas.chartingSpace.fitFunction
panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
panel.session = pSession
panel.initialize()
}
@@ -76,20 +76,20 @@ function newPanelsSpace () {
return panel.handle
}
function makeVisible (owner, type) {
function unHide (owner, type) {
for (let i = 0; i < thisObject.panels.length; i++) {
let panel = thisObject.panels[i]
if (panel.owner === owner && panel.type === type) {
panel.isVisible = true
panel.isHidden = false
}
}
}
function makeInvisible (owner, type) {
function hide (owner, type) {
for (let i = 0; i < thisObject.panels.length; i++) {
let panel = thisObject.panels[i]
if (panel.owner === owner && panel.type === type) {
panel.isVisible = false
panel.isHidden = true
}
}
}
@@ -130,7 +130,7 @@ function newPanelsSpace () {
if (thisObject.panels !== undefined) {
for (let i = 0; i < thisObject.panels.length; i++) {
let panel = thisObject.panels[i]
let owner = canvas.chartSpace.inViewport.get(panel.owner)
let owner = canvas.chartingSpace.inViewport.get(panel.owner)
if (owner !== undefined) {
if (panel.physics !== undefined) {
panel.physics()
@@ -144,7 +144,7 @@ function newPanelsSpace () {
if (thisObject.panels !== undefined) {
for (let i = 0; i < thisObject.panels.length; i++) {
let panel = thisObject.panels[i]
if (panel.isVisible === false || panel.isHidden === true) { continue }
/* setting the speed of the panel */
if (panel.container.speed === undefined) {
panel.container.speed = {
@@ -162,8 +162,8 @@ function newPanelsSpace () {
centerPoint.y = centerPoint.y + panel.container.frame.height / 2
/* Lets see which quadrant the panel is at */
let verticalLine = (canvas.chartSpace.viewport.visibleArea.topRight.x - canvas.chartSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartSpace.viewport.visibleArea.topLeft.x
let horizontalLine = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartSpace.viewport.visibleArea.topRight.y
let verticalLine = (canvas.chartingSpace.viewport.visibleArea.topRight.x - canvas.chartingSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartingSpace.viewport.visibleArea.topLeft.x
let horizontalLine = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartingSpace.viewport.visibleArea.topRight.y
if (panel.panelTabButton !== undefined) {
if (panel.panelTabButton.status === 'up') {
@@ -208,18 +208,18 @@ function newPanelsSpace () {
panel.container.frame.position.x = browserCanvas.width - panel.container.frame.width
}
}
if (panel.container.frame.height <= canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) {
if (panel.container.frame.height <= canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) {
if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'topRight') {
panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y
isOverlapping(i, panel.container)
if (panel.container.frame.position.y < canvas.chartSpace.viewport.visibleArea.topLeft.y) {
panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.topLeft.y
if (panel.container.frame.position.y < canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.topLeft.y
}
} else {
panel.container.frame.position.y = panel.container.frame.position.y + panel.container.speed.y
isOverlapping(i, panel.container)
if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartSpace.viewport.visibleArea.bottomRight.y) {
panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartingSpace.viewport.visibleArea.bottomRight.y) {
panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
}
}
}
@@ -246,7 +246,7 @@ function newPanelsSpace () {
for (let i = 0; i < currentIndex; i++) {
let panel = thisObject.panels[i]
if (panel.isVisible === true) {
if (panel.isVisible === true && panel.isHidden === false) {
if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
pushOut(currentContainer, panel.container, panel.gravitatesTowards)
}
@@ -317,9 +317,11 @@ function newPanelsSpace () {
for (let i = 0; i < thisObject.panels.length; i++) {
let panel = thisObject.panels[i]
let owner = canvas.chartSpace.inViewport.get(panel.owner)
let owner = canvas.chartingSpace.inViewport.get(panel.owner)
if (owner !== undefined) {
panel.draw()
if (panel.isVisible === true && panel.isHidden === false) {
panel.draw()
}
}
}
}
@@ -334,14 +336,18 @@ function newPanelsSpace () {
*/
for (let i = thisObject.panels.length - 1; i >= 0; i--) {
let panel = thisObject.panels[i]
let owner = canvas.chartSpace.inViewport.get(panel.owner)
let owner = canvas.chartingSpace.inViewport.get(panel.owner)
if (owner !== undefined) {
container = panel.getContainer(point)
if (panel.isVisible === true && panel.isHidden === false) {
container = panel.getContainer(point)
}
}
if (container !== undefined) {
container.space = 'Panels Space'
return container
}
}
thisObject.container.space = 'Panels Space'
return thisObject.container
}
}
Spaces/TopSpace.js
+63 -23
View File
@@ -7,43 +7,50 @@ function newTopSpace () {
initialize: initialize
}
let container = newContainer()
container.initialize()
thisObject.container = container
thisObject.container = newContainer()
thisObject.container.initialize()
resize()
container.isDraggeable = false
thisObject.container.isDraggeable = false
let backgroundImage
let logoImage
return thisObject
function initialize () {
canvas.eventHandler.listenToEvent('Browser Resized', resize)
backgroundImage = new Image()
logoImage = new Image()
loadImage('superalgos-header-background', backgroundImage)
loadImage('superalgos-logo-for-color-background', logoImage)
function loadImage (name, image) {
const PATH = 'Images/'
image.onload = onImageLoad
image.fileName = name
function onImageLoad () {
image.canDraw = true
}
image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
}
}
function resize () {
thisObject.container.frame.width = browserCanvas.width
thisObject.container.frame.height = TOP_SPACE_HEIGHT
container.frame.position.x = 0
thisObject.container.frame.position.x = 0
try {
container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y
thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y
} catch (e) { }
}
function getContainer (point) {
let container
return
container = thisObject.currentEvent.getContainer(point)
if (container !== undefined) { return container }
container = thisObject.login.getContainer(point)
if (container !== undefined) { return container }
/* The point does not belong to any inner container, so we return the current container. */
return thisObject.container
}
function draw () {
@@ -54,15 +61,48 @@ function newTopSpace () {
}
function drawBackground () {
/* Solid Color */
let opacity = 1
browserCanvasContext.beginPath()
browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
if (areWeRecording === true) {
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
} else {
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
}
browserCanvasContext.closePath()
browserCanvasContext.fill()
/* Background Image */
if (backgroundImage !== undefined) {
if (backgroundImage.canDraw === true) {
let imagePosition = {
x: 0,
y: 0
}
browserCanvasContext.drawImage(
backgroundImage, imagePosition.x,
imagePosition.y,
browserCanvas.width,
TOP_SPACE_HEIGHT - 2)
}
}
/* Logo Image */
if (logoImage !== undefined) {
if (logoImage.canDraw === true) {
let imagePosition = {
x: 10,
y: 0
}
browserCanvasContext.drawImage(
logoImage, imagePosition.x,
imagePosition.y,
150,
TOP_SPACE_HEIGHT - 2)
}
}
}
}
SplashScreen.js
+6 -9
View File
@@ -43,7 +43,7 @@ function newSplashScreen () {
canDrawLogo = true
}
logo.src = window.canvasApp.urlPrefix + 'Images/Superalgos-logo-horz-sm-t.png'
logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
canvas.eventHandler.listenToEvent('Browser Resized', resize)
}
@@ -71,12 +71,9 @@ function newSplashScreen () {
/* Set the background. */
browserCanvasContext.beginPath()
browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
browserCanvasContext.closePath()
browserCanvasContext.fill()
if (canDrawLogo === false) { return }
@@ -107,11 +104,11 @@ function newSplashScreen () {
stepsInitializationCounter = 99
}
let fontSize = 10
let fontSize = 15
let labelPoint = {
x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 25,
y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 80 + yDisplacement
x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 22,
y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 90 + yDisplacement
}
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
@@ -123,13 +120,13 @@ function newSplashScreen () {
/* Algo Bots Competitions Sub Title */
fontSize = 15
fontSize = 35
title = 'Beta'
titlePoint = {
x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,
y: thisObject.container.frame.height / 2 - fontSize * 2 + 80 + yDisplacement
y: thisObject.container.frame.height / 2 + 70 + yDisplacement
}
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
Utilities.js
+59 -14
View File
@@ -82,7 +82,7 @@ function convertTimeFrameToName (pTimeFrame) {
}
}
function download (filename, text) {
function downloadText (filename, text) {
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', filename)
@@ -92,20 +92,37 @@ function download (filename, text) {
document.body.removeChild(element)
}
function downloadCanvas (filename) {
let data = browserCanvas.toDataURL('image/png', 1)
/* Change MIME type to trick the browser to downlaod the file instead of displaying it */
data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
/* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png')
let element = document.createElement('a')
element.setAttribute('href', data)
element.setAttribute('download', filename + '.PNG')
element.style.display = 'none'
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
};
function transformThisPoint (point, container) {
/* We make the point relative to the current frame */
point = container.frame.frameThisPoint(point)
/* We pass this point through the canvas.chartSpace.viewport lends, meaning we apply the canvas.chartSpace.viewport zoom and displacement. */
/* We pass this point through the canvas.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */
point = canvas.chartSpace.viewport.transformThisPoint(point)
point = canvas.chartingSpace.viewport.transformThisPoint(point)
return point
}
function unTransformThisPoint (point, container) {
point = canvas.chartSpace.viewport.unTransformThisPoint(point)
point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
point = container.frame.unframeThisPoint(point)
return point
@@ -124,7 +141,7 @@ function pad (str, max) {
return str.length < max ? pad('0' + str, max) : str
}
function getDateFromPoint (point, container, coordinateSystem) {
function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
point = unTransformThisPoint(point, container)
point = coordinateSystem.unInverseTransform(point, container.frame.height)
@@ -133,13 +150,43 @@ function getDateFromPoint (point, container, coordinateSystem) {
return date
}
function getRateFromPoint (point, container, coordinateSystem) {
function getDateFromPointAtChartsSpace (point, container, coordinateSystem) {
point = container.frame.unframeThisPoint(point)
point = coordinateSystem.unInverseTransform(point, container.frame.height)
let date = new Date(point.x)
return date
}
function getDateFromPointAtContainer (point, container, coordinateSystem) {
point = coordinateSystem.unInverseTransform(point, container.frame.height)
let date = new Date(point.x)
return date
}
function getRateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
point = unTransformThisPoint(point, container)
point = coordinateSystem.unInverseTransform(point, container.frame.height)
return point.y
}
function getRateFromPointAtChartingSpace (point, container, coordinateSystem) {
point = container.frame.unframeThisPoint(point)
point = coordinateSystem.unInverseTransform(point, container.frame.height)
return point.y
}
function getRateFromPointAtContainer (point, container, coordinateSystem) {
point = coordinateSystem.unInverseTransform(point, container.frame.height)
return point.y
}
function getMilisecondsFromPoint (point, container, coordinateSystem) {
point = unTransformThisPoint(point, container)
point = coordinateSystem.unInverseTransform(point, container.frame.height)
@@ -153,14 +200,14 @@ function moveToUserPosition (container, currentDate, currentRate, coordinateSyst
y: currentRate
}
/* Put this point in the coordinate system of the canvas.chartSpace.viewport */
/* Put this point in the coordinate system of the canvas.chartingSpace.viewport */
targetPoint = coordinateSystem.transformThisPoint(targetPoint)
targetPoint = transformThisPoint(targetPoint, container)
let displaceVector
let targetNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(targetPoint)
let mouseNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(mousePosition)
let targetNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(targetPoint)
let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mousePosition)
displaceVector = {
x: mouseNoZoom.x - targetNoZoom.x,
@@ -181,16 +228,14 @@ function removeTime (datetime) {
return dateOnly
}
function printLabel (labelToPrint, x, y, opacity, fontSize) {
function printLabel (labelToPrint, x, y, opacity, fontSize, color) {
let labelPoint
if (color === undefined) { color = UI_COLOR.DARK }
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
let label = '' + labelToPrint
let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
browserCanvasContext.fillText(label, x, y)
}
Utilities/RoundedCornersBackground.js
+1
View File
@@ -131,6 +131,7 @@ function drawIcon (icon, xFactor, yFactor, xOffset, yOffset, imageSize, containe
}
imagePosition = container.frame.frameThisPoint(imagePosition)
browserCanvasContext.drawImage(
icon, imagePosition.x,
imagePosition.y,
VideoRecorder.js
+173
View File
@@ -0,0 +1,173 @@
function newVideoRecorder () {
let thisObject = {
recordCanvas: recordCanvas
}
let lastAction
return thisObject
function recordCanvas () {
{
const DISTANCE_BETWEEN_ICONS = 35
const ICON_SIZES = 50
let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
let draggingIcon = canvas.designSpace.iconCollection.get('hand-drag')
let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
let imagePosition
let buttonPressedIcon
if (canvas.mouse.action === 'key down' && lastAction === 'dragging') {
canvas.mouse.action = 'dragging'
}
switch (canvas.mouse.action) {
case 'moving': {
pointerIcon = mousePointerIcon
break
}
case 'dragging': {
pointerIcon = draggingIcon
break
}
case 'wheel': {
if (canvas.mouse.event.delta > 0) {
pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up')
} else {
pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down')
}
break
}
case 'key down': {
pointerIcon = mousePointerIcon
break
}
case 'key up': {
pointerIcon = mousePointerIcon
break
}
}
lastAction = canvas.mouse.action
imagePosition = {
x: canvas.mouse.position.x,
y: canvas.mouse.position.y
}
drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
switch (canvas.mouse.event.buttons) {
case 0: {
buttonPressedIcon = undefined
break
}
case 1: {
buttonPressedIcon = leftClickIcon
break
}
case 2: {
buttonPressedIcon = rightClickIcon
break
}
case 3: {
buttonPressedIcon = undefined
break
}
case 4: {
buttonPressedIcon = wheelClickIcon
break
}
}
let firstRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 1
let secondRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 2
let icon
imagePosition = {
x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 2,
y: canvas.mouse.position.y
}
drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
if (canvas.mouse.event.shiftKey === true) {
icon = canvas.designSpace.iconCollection.get('key-shift')
imagePosition = {
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
y: canvas.mouse.position.y + firstRow
}
drawMousePointer(icon, imagePosition, ICON_SIZES)
}
if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
icon = canvas.designSpace.iconCollection.get('key-ctrl')
imagePosition = {
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
y: canvas.mouse.position.y + secondRow
}
drawMousePointer(icon, imagePosition, ICON_SIZES)
}
if (canvas.mouse.event.altKey === true) {
icon = canvas.designSpace.iconCollection.get('key-alt')
imagePosition = {
x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 3 + ICON_SIZES * 0,
y: canvas.mouse.position.y + secondRow
}
drawMousePointer(icon, imagePosition, ICON_SIZES)
}
if (canvas.mouse.event.code === 'ArrowUp') {
icon = canvas.designSpace.iconCollection.get('key-up')
imagePosition = {
x: canvas.mouse.position.x - 0,
y: canvas.mouse.position.y + firstRow
}
drawMousePointer(icon, imagePosition, ICON_SIZES)
}
if (canvas.mouse.event.code === 'ArrowDown') {
icon = canvas.designSpace.iconCollection.get('key-down')
imagePosition = {
x: canvas.mouse.position.x - 0,
y: canvas.mouse.position.y + secondRow
}
drawMousePointer(icon, imagePosition, ICON_SIZES)
}
if (canvas.mouse.event.code === 'ArrowLeft') {
icon = canvas.designSpace.iconCollection.get('key-left')
imagePosition = {
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 0 - ICON_SIZES * 1,
y: canvas.mouse.position.y + secondRow
}
drawMousePointer(icon, imagePosition, ICON_SIZES)
}
if (canvas.mouse.event.code === 'ArrowRight') {
icon = canvas.designSpace.iconCollection.get('key-right')
imagePosition = {
x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 0 + ICON_SIZES * 1,
y: canvas.mouse.position.y + secondRow
}
drawMousePointer(icon, imagePosition, ICON_SIZES)
}
function drawMousePointer (icon, imagePosition, imageSize) {
if (icon !== undefined) {
if (icon.canDrawIcon === true) {
browserCanvasContext.drawImage(
icon, imagePosition.x,
imagePosition.y,
imageSize,
imageSize)
}
}
}
mediaRecorder.capture(browserCanvas)
}
}
}