diff --git a/Animation.js b/Animation.js index 41ec4c976..b06c4eb6d 100644 --- a/Animation.js +++ b/Animation.js @@ -61,11 +61,11 @@ function newAnimation () { try { if (window.canvasApp.visible === true) { /* We set the canvas to its normal width and height */ - browserCanvas.width = window.innerWidth - browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN + // browserCanvas.width = window.innerWidth + // browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN /* First thing is to clear the actual canvas */ - // clearBrowserCanvas() + clearBrowserCanvas() /* We loop through the callback functions collections and execute them all. */ let performanceMap = new Map() @@ -139,6 +139,7 @@ function newAnimation () { } /* Media Recording */ + videoRecorder.physics() if (areWeRecording === true) { videoRecorder.recordCanvas() } @@ -161,12 +162,7 @@ function newAnimation () { } function clearBrowserCanvas () { - browserCanvasContext.beginPath() - - browserCanvasContext.rect(0, 0, browserCanvas.width, browserCanvas.height) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - browserCanvasContext.closePath() - browserCanvasContext.fill() + browserCanvasContext.clearRect(0, 0, browserCanvas.width, browserCanvas.height) } } diff --git a/Canvas.js b/Canvas.js index 50e4a896e..70bda0737 100644 --- a/Canvas.js +++ b/Canvas.js @@ -250,6 +250,29 @@ function newCanvas () { thisObject.mouse.action = 'key down' checkMediaRecording(event) + canvas.chartingSpace.onKeyPressed(event) + + if (event.key === 'Escape' && canvas.floatingSpace.inMapMode === true) { + canvas.floatingSpace.exitMapMode() + } + + if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'M' || event.key === 'm')) { + canvas.floatingSpace.toggleMapMode() + event.preventDefault() + return + } + + if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'R' || event.key === 'r')) { + canvas.floatingSpace.toggleDrawReferenceLines() + event.preventDefault() + return + } + + if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'C' || event.key === 'c')) { + canvas.floatingSpace.toggleDrawChainLines() + event.preventDefault() + return + } let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus() if (nodeOnFocus !== undefined) { @@ -377,7 +400,7 @@ function newCanvas () { if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true) { if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 65 && event.keyCode <= 90)) { - /* From here we prevent the default behaviour */ + /* From here we prevent the default behaviour. Putting it earlier prevents imput box and text area to receive keystrokes */ event.preventDefault() let nodeUsingThisKey = canvas.designSpace.workspace.getNodeByShortcutKey(event.key) @@ -548,13 +571,17 @@ function newCanvas () { /* We check if the mouse is over a panel/ */ - container = thisObject.panelsSpace.getContainer(point) + container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING) - if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) { - containerBeingDragged = container - containerDragStarted = true - containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point) - return + if (container !== undefined && event.shiftKey === false) { + if (container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point) + return + } else { + return + } } if (container !== undefined && container.isClickeable === true) { @@ -574,7 +601,9 @@ function newCanvas () { return } else { if (container.isClickeable === false) { - viewPortBeingDragged = true + if (event.buttons === 2) { + viewPortBeingDragged = true + } } return } @@ -587,6 +616,12 @@ function newCanvas () { containerDragStarted = true floatingObjectDragStarted = true containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point) + + if (event.candelDragging === true) { + containerBeingDragged = undefined + containerDragStarted = false + floatingObjectDragStarted = false + } return } @@ -641,7 +676,7 @@ function newCanvas () { /* We check if the mouse is over a panel/ */ - container = thisObject.panelsSpace.getContainer(point) + container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -751,7 +786,7 @@ function newCanvas () { 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 Designe Space / */ if (thisObject.designSpace !== undefined) { container = thisObject.designSpace.getContainer(point) @@ -783,7 +818,7 @@ function newCanvas () { /* We check if the mouse is over a panel/ */ if (thisObject.panelsSpace !== undefined) { - container = thisObject.panelsSpace.getContainer(point) + container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -835,6 +870,9 @@ function newCanvas () { // cross-browser wheel delta var event = window.event || event // old IE support event.delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)) + if (IS_MAC) { + event.delta = event.delta / MAC_AMOUNT_FACTOR + } /* We try first with panels. */ @@ -900,7 +938,7 @@ function newCanvas () { floatingObjectDragStarted || viewPortBeingDragged ) { - ignoreNextClick = true + ignoreNextClick = false } /* Turn off all the possible things that can be dragged. */ @@ -922,10 +960,12 @@ 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' + if (event !== undefined) { + 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) diff --git a/ChartingSpace/EdgeEditor.js b/ChartingSpace/EdgeEditor.js index f40dffd2f..43329b0c0 100644 --- a/ChartingSpace/EdgeEditor.js +++ b/ChartingSpace/EdgeEditor.js @@ -5,6 +5,9 @@ function newEdgeEditor () { container: undefined, fitFunction: undefined, isVisible: true, + isMouseOver: undefined, + resetAspectRatio: resetAspectRatio, + onKeyPressed: onKeyPressed, physics: physics, drawForeground: drawForeground, getContainer: getContainer, @@ -22,11 +25,11 @@ function newEdgeEditor () { thisObject.container.isWheelable = false thisObject.container.detectMouseOver = true - let buttonUsedForDragging - let isMouseOver + let whatHappened let whereIsMouseOver = 'outside' let coordinateSystem + let coordinateSystemWhenDragStarted let onMouseOverEventSubscriptionId let onMouseNotOverEventSubscriptionId @@ -38,6 +41,25 @@ function newEdgeEditor () { y: 0 } } + + mouseWhenDragStarted = { + position: { + x: 0, + y: 0 + } + } + + parentFrameWhenDragStarted = { + position: { + x: 0, + y: 0 + }, + width: 0, + height: 0 + } + + let doubleClickCounter = 0 + return thisObject function finalize () { @@ -49,6 +71,16 @@ function newEdgeEditor () { thisObject.container = undefined thisObject.fitFunction = undefined mouse = undefined + mouseWhenDragStarted = undefined + parentFrameWhenDragStarted = undefined + + coordinateSystem = undefined + + if (coordinateSystemWhenDragStarted !== undefined) { + coordinateSystemWhenDragStarted.finalize() + } + + coordinateSystemWhenDragStarted = undefined } function initialize (pCoordinateSystem) { @@ -60,7 +92,7 @@ function newEdgeEditor () { } function onMouseOver (event) { - isMouseOver = true + thisObject.isMouseOver = true mouse = { position: { x: event.x, @@ -70,24 +102,121 @@ function newEdgeEditor () { } function onMouseNotOver () { - isMouseOver = false + thisObject.isMouseOver = false + } + + function resetAspectRatio () { + /* Resize the Time Machine to match the current screen aspect ration */ + + thisObject.container.parentContainer.frame.width = browserCanvas.width / TIME_MACHINE_WIDTH + thisObject.container.parentContainer.frame.height = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT + coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height + coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width + coordinateSystem.recalculateScale() + thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event) + } + + function onDoubleClick (event) { + doubleClickCounter = 0 + if (canvas.chartingSpace.viewport.zoomLevel === DOUBLE_CLICK_ZOOM_OUT_LEVEL) { + canvas.chartingSpace.viewport.displaceToContainer(thisObject.container.parentContainer) + canvas.chartingSpace.viewport.zoomAtCenter(DOUBLE_CLICK_ZOOM_IN_LEVEL) + return + } + if (canvas.chartingSpace.viewport.zoomLevel === DOUBLE_CLICK_ZOOM_IN_LEVEL) { + canvas.chartingSpace.viewport.zoomAtCenter(DOUBLE_CLICK_ZOOM_IN_IN_LEVEL) + return + } } function onDragStarted (event) { + if (doubleClickCounter > 0) { + onDoubleClick(event) + return + } else { + doubleClickCounter = 50 + } + + mouseWhenDragStarted = { + position: { + x: event.x, + y: event.y + } + } + + parentFrameWhenDragStarted = { + position: { + x: thisObject.container.parentContainer.frame.position.x, + y: thisObject.container.parentContainer.frame.position.y + }, + width: thisObject.container.parentContainer.frame.width, + height: thisObject.container.parentContainer.frame.height + } + + coordinateSystemWhenDragStarted = newCoordinateSystem() + + let minValue = { + x: coordinateSystem.min.x, + y: coordinateSystem.min.y + } + + let maxValue = { + x: coordinateSystem.max.x, + y: coordinateSystem.max.y + } + + coordinateSystemWhenDragStarted.initialize(minValue, maxValue, coordinateSystem.maxWidth, coordinateSystem.maxHeight) + switch (event.buttons) { case 1: { - buttonUsedForDragging = 'left mouse button' + whatHappened = 'left mouse button' + if (event.shiftKey === true) { + whatHappened = 'left mouse button + SHIFT' + } break } case 2: { - buttonUsedForDragging = 'right mouse button' + whatHappened = 'right mouse button' // this will never happen as of today break } } } + function onKeyPressed (event) { + const STEP = 10 + + if (event.shiftKey === false && event.code === 'ArrowLeft') { + thisObject.container.frame.position.x = thisObject.container.frame.position.x + STEP + whatHappened = 'left or right arrow key pressed' + return + } + + if (event.shiftKey === false && event.code === 'ArrowRight') { + thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP + whatHappened = 'left or right arrow key pressed' + return + } + + if (event.shiftKey === false && event.code === 'ArrowUp') { + thisObject.container.frame.position.y = thisObject.container.frame.position.y + STEP + whatHappened = 'up or down arrow key pressed' + return + } + + if (event.shiftKey === false && event.code === 'ArrowDown') { + thisObject.container.frame.position.y = thisObject.container.frame.position.y - STEP + whatHappened = 'up or down arrow key pressed' + return + } + + if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'A' || event.key === 'a')) { + resetAspectRatio() + return + } + } + function getContainer (event, purpose) { - if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) { + if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.buttons !== 2) { let point = { x: event.x, y: event.y @@ -127,8 +256,28 @@ function newEdgeEditor () { } function physics () { + draggingPhysics() + doubleClickPhysics() + } + + function doubleClickPhysics () { + doubleClickCounter-- + if (doubleClickCounter < 0) { + doubleClickCounter = 0 + } + } + + function draggingPhysics () { if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return } + let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mouse.position) + let mouseWhenDragStartedNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mouseWhenDragStarted.position) + + let dragVectorWhenDragStarted = { + x: mouseNoZoom.x - mouseWhenDragStartedNoZoom.x, + y: mouseNoZoom.y - mouseWhenDragStartedNoZoom.y + } + let dragVector = { x: thisObject.container.frame.position.x, y: thisObject.container.frame.position.y @@ -137,28 +286,31 @@ function newEdgeEditor () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - const MIN_WIDTH = 100 - const MIN_HEIGHT = 50 + const MIN_WIDTH = 200 + const MIN_HEIGHT = 100 switch (whereIsMouseOver) { case 'center': { - switch (buttonUsedForDragging) { - case 'right mouse button': { + switch (whatHappened) { + case 'left mouse button + SHIFT': { /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */ - thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x - thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y + thisObject.container.parentContainer.frame.position.x = parentFrameWhenDragStarted.position.x + dragVectorWhenDragStarted.x + thisObject.container.parentContainer.frame.position.y = parentFrameWhenDragStarted.position.y + dragVectorWhenDragStarted.y + snapPointToGrid(thisObject.container.parentContainer.frame.position) thisObject.container.parentContainer.eventHandler.raiseEvent('onDisplace') break } case 'left mouse button': { let point = { - x: -dragVector.x, - y: -dragVector.y + x: (-dragVectorWhenDragStarted.x), + y: (-dragVectorWhenDragStarted.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 + + let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystemWhenDragStarted) + let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystemWhenDragStarted) + + let xDifferenceMaxMin = coordinateSystemWhenDragStarted.max.x - coordinateSystemWhenDragStarted.min.x + let yDifferenceMaxMin = coordinateSystemWhenDragStarted.max.y - coordinateSystemWhenDragStarted.min.y coordinateSystem.min.x = newMinDate.valueOf() coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin @@ -169,25 +321,67 @@ function newEdgeEditor () { } coordinateSystem.recalculateScale(event) } + break + case 'left or right arrow key pressed': { + let point = { + x: -dragVector.x, + y: 0 + } + + let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem) + let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x + coordinateSystem.min.x = newMinDate.valueOf() + coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin + let event = { + type: 'center dragged', + dragVector: dragVector + } + coordinateSystem.recalculateScale(event) + } + break + case 'up or down arrow key pressed': { + let point = { + x: 0, + y: -dragVector.y + } + + let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem) + let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y + coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin + coordinateSystem.max.y = newMaxRate + let event = { + type: 'center dragged', + dragVector: dragVector + } + coordinateSystem.recalculateScale(event) + } + break } 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 + dragVectorWhenDragStarted.x = 0 + + let newHight = parentFrameWhenDragStarted.height - dragVectorWhenDragStarted.y + if (newHight < MIN_HEIGHT && dragVectorWhenDragStarted.y > 0) { + dragVectorWhenDragStarted.y = parentFrameWhenDragStarted.height - MIN_HEIGHT } + thisObject.container.parentContainer.frame.position.y = parentFrameWhenDragStarted.position.y + dragVectorWhenDragStarted.y + snapPointToGrid(thisObject.container.parentContainer.frame.position) + thisObject.container.parentContainer.frame.height = parentFrameWhenDragStarted.height + (parentFrameWhenDragStarted.position.y - thisObject.container.parentContainer.frame.position.y) + let point = { - x: dragVector.x, - y: dragVector.y + x: 0, + y: (thisObject.container.parentContainer.frame.position.y - parentFrameWhenDragStarted.position.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 + /* This is equivalent to getRateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */ + point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.height) + let newMaxRate = point.y - switch (buttonUsedForDragging) { + switch (whatHappened) { case 'left mouse button': { coordinateSystem.max.y = newMaxRate coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height @@ -198,7 +392,7 @@ function newEdgeEditor () { coordinateSystem.recalculateScale(event) break } - case 'right mouse button': { + case 'left mouse button + SHIFT': { coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height coordinateSystem.recalculateScale() break @@ -208,19 +402,27 @@ function newEdgeEditor () { break } case 'bottom' : { - if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT && dragVector.y < 0) { - return + dragVectorWhenDragStarted.x = 0 + + let newHight = dragVectorWhenDragStarted.y + parentFrameWhenDragStarted.height + if (newHight < MIN_HEIGHT && dragVectorWhenDragStarted.y < 0) { + dragVectorWhenDragStarted.y = MIN_HEIGHT - parentFrameWhenDragStarted.height } let point = { - x: dragVector.x, - y: dragVector.y + thisObject.container.frame.height + x: 0, + y: dragVectorWhenDragStarted.y + parentFrameWhenDragStarted.height + parentFrameWhenDragStarted.position.y } - let newMinRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem) + snapPointToGrid(point) + point.y = point.y - parentFrameWhenDragStarted.position.y - thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y + thisObject.container.parentContainer.frame.height = point.y - switch (buttonUsedForDragging) { + /* This is equivalent to getRateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */ + point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.height) + let newMinRate = point.y + + switch (whatHappened) { case 'left mouse button': { coordinateSystem.min.y = newMinRate coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height @@ -231,7 +433,7 @@ function newEdgeEditor () { coordinateSystem.recalculateScale(event) break } - case 'right mouse button': { + case 'left mouse button + SHIFT': { coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height coordinateSystem.recalculateScale() break @@ -241,26 +443,34 @@ function newEdgeEditor () { break } case 'left' : { - if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH && dragVector.x > 0) { - return + dragVectorWhenDragStarted.y = 0 + + let newWidth = parentFrameWhenDragStarted.width - dragVectorWhenDragStarted.x + if (newWidth < MIN_WIDTH && dragVectorWhenDragStarted.x > 0) { + dragVectorWhenDragStarted.x = parentFrameWhenDragStarted.width - MIN_WIDTH } + + thisObject.container.parentContainer.frame.position.x = parentFrameWhenDragStarted.position.x + dragVectorWhenDragStarted.x + snapPointToGrid(thisObject.container.parentContainer.frame.position) + thisObject.container.parentContainer.frame.width = parentFrameWhenDragStarted.width + (parentFrameWhenDragStarted.position.x - thisObject.container.parentContainer.frame.position.x) + let point = { - x: dragVector.x, - y: dragVector.y + x: (thisObject.container.parentContainer.frame.position.x - parentFrameWhenDragStarted.position.x), + y: 0 } - 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 + /* This is equivalent to getDateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */ + point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.width) + let newMinDate = point.x - switch (buttonUsedForDragging) { + switch (whatHappened) { case 'left mouse button': { coordinateSystem.min.x = newMinDate.valueOf() coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width coordinateSystem.recalculateScale() break } - case 'right mouse button': { + case 'left mouse button + SHIFT': { coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width coordinateSystem.recalculateScale() break @@ -270,26 +480,34 @@ function newEdgeEditor () { break } case 'right' : { - if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH && dragVector.x < 0) { - return + dragVectorWhenDragStarted.y = 0 + + let newWidth = dragVectorWhenDragStarted.x + parentFrameWhenDragStarted.width + if (newWidth < MIN_WIDTH && dragVectorWhenDragStarted.x < 0) { + dragVectorWhenDragStarted.x = MIN_WIDTH - parentFrameWhenDragStarted.width } let point = { - x: dragVector.x + thisObject.container.frame.width, - y: dragVector.y + x: dragVectorWhenDragStarted.x + parentFrameWhenDragStarted.width + parentFrameWhenDragStarted.position.x, + y: 0 } - let newMaxDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem) + snapPointToGrid(point) + point.x = point.x - parentFrameWhenDragStarted.position.x - thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x + thisObject.container.parentContainer.frame.width = point.x - switch (buttonUsedForDragging) { + /* This is equivalent to getRateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */ + point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.width) + let newMaxDate = point.x + + switch (whatHappened) { case 'left mouse button': { coordinateSystem.max.x = newMaxDate.valueOf() coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width coordinateSystem.recalculateScale() break } - case 'right mouse button': { + case 'left mouse button + SHIFT': { coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width coordinateSystem.recalculateScale() break @@ -299,6 +517,22 @@ function newEdgeEditor () { break } } + + function snapPointToGrid (point) { + point.x = snapScalarToGrid(point.x) + point.y = snapScalarToGrid(point.y) + } + + function snapScalarToGrid (scalar) { + let sign + if (scalar < 0) { + sign = -1 + } else { + sign = 1 + } + const GRID_SIZE = 10 + return Math.trunc(scalar / GRID_SIZE) * GRID_SIZE + GRID_SIZE / 2 * sign + } } function drawForeground () { @@ -306,8 +540,8 @@ function newEdgeEditor () { let edgeSize let lineWidth - if (whereIsMouseOver === 'outside' || isMouseOver === false) { - edgeSize = EDGE_SIZE / 2 + if (whereIsMouseOver === 'outside' || thisObject.isMouseOver === false) { + edgeSize = 2 lineWidth = 0.1 } else { edgeSize = EDGE_SIZE @@ -459,7 +693,7 @@ function newEdgeEditor () { drawEdge('left') function drawEdge (edgeType) { - if (whereIsMouseOver === edgeType && isMouseOver === true) { + if (whereIsMouseOver === edgeType && thisObject.isMouseOver === true) { browserCanvasContext.lineWidth = lineWidth browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' diff --git a/ChartingSpace/PlottersManager.js b/ChartingSpace/PlottersManager.js index 3b245cf99..848f5cf1a 100644 --- a/ChartingSpace/PlottersManager.js +++ b/ChartingSpace/PlottersManager.js @@ -301,9 +301,16 @@ function newPlottersManager () { function draw () { if (thisObject.connectors === undefined) { return } // We need to wait /* First the Product Plotters. */ + let maxElementsPlotted = 0 for (let i = 0; i < thisObject.connectors.length; i++) { let connector = thisObject.connectors[thisObject.connectors.length - i - 1] - connector.plotter.draw() + let elementsPlotted = connector.plotter.draw() + if (elementsPlotted !== undefined) { + if (elementsPlotted > maxElementsPlotted) { + maxElementsPlotted = elementsPlotted + } + } } + return maxElementsPlotted } } diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js index 71122a7d9..5a6c07b75 100644 --- a/ChartingSpace/TimeMachine.js +++ b/ChartingSpace/TimeMachine.js @@ -22,6 +22,8 @@ function newTimeMachine () { rateScale: undefined, payload: undefined, edgeEditor: undefined, + onFocus: undefined, + onKeyPressed: onKeyPressed, timelineCharts: [], fitFunction: fitFunction, physics: physics, @@ -42,12 +44,14 @@ function newTimeMachine () { } } + let tabAnimation = 0 + let tabAnimationStatus = 'Close' + let tabAnimationCounter = 0 + let wasOnFocus = false let drawScales = false let syncWithDesignerLoop = 0 let timelineChartsMap = new Map() - let onViewportPositionChangedEventSuscriptionId - let onViewportZoomChangedEventSuscriptionId let onMouseOverEventSuscriptionId let onMouseNotOverEventSuscriptionId let timeScaleMouseOverEventSuscriptionId @@ -67,13 +71,11 @@ function newTimeMachine () { thisObject.container.insideViewport = true thisObject.container.detectMouseOver = true - thisObject.container.frame.width = TIME_MACHINE_WIDTH - thisObject.container.frame.height = TIME_MACHINE_HEIGHT + thisObject.container.frame.width = browserCanvas.width / TIME_MACHINE_WIDTH + thisObject.container.frame.height = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT } function finalize () { - canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId) - canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId) timeMachineCoordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId) if (thisObject.timeScale !== undefined) { @@ -146,8 +148,6 @@ function newTimeMachine () { 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) thisObject.edgeEditor = newEdgeEditor() @@ -157,6 +157,10 @@ function newTimeMachine () { callBackFunction() } + function onKeyPressed (event) { + thisObject.edgeEditor.onKeyPressed(event) + } + function onMouseOver (event) { drawScales = true @@ -308,36 +312,17 @@ function newTimeMachine () { } } - function onViewportZoomChanged (event) { - if (thisObject.container.frame.isInViewPort()) { - recalculateCurrentDatetime() - } - } - - function onViewportPositionChanged () { - if (thisObject.container.frame.isInViewPort()) { - recalculateCurrentDatetime() - } - } - 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.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 + x: thisObject.container.frame.width / 2, + y: thisObject.container.frame.height / 2 } - center = unTransformThisPoint(center, thisObject.container) - center = timeMachineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) - - datetime = new Date(center.x) + datetime = new Date(getDateFromPointAtContainer(center, thisObject.container, timeMachineCoordinateSystem)) for (let i = 0; i < thisObject.timelineCharts.length; i++) { let timelineChart = thisObject.timelineCharts[i] @@ -391,10 +376,59 @@ function newTimeMachine () { syncWithDesigner() } panelPhysics() + onFocusPhysics() + tabAnimationPhysics() + } + + function tabAnimationPhysics () { + const MAX_COUNTER_VALUE = 40 + const STEP = 10 + + if (wasOnFocus === true && thisObject.onFocus === false) { + tabAnimationStatus = 'Closing' + } + if (wasOnFocus === false && thisObject.onFocus === true) { + tabAnimationStatus = 'Opening' + } + + if (tabAnimationStatus === 'Closing') { + tabAnimationCounter = tabAnimationCounter - STEP + if (tabAnimationCounter <= 0) { + tabAnimationCounter = 0 + tabAnimationStatus = 'Closed' + } + } + if (tabAnimationStatus === 'Opening') { + tabAnimationCounter = tabAnimationCounter + STEP + if (tabAnimationCounter >= MAX_COUNTER_VALUE) { + tabAnimationCounter = MAX_COUNTER_VALUE + tabAnimationStatus = 'Open' + } + } + } + + function onFocusPhysics () { + wasOnFocus = thisObject.onFocus + if (thisObject.edgeEditor.isMouseOver === true) { + thisObject.onFocus = true + } else { + thisObject.onFocus = false + } } function panelPhysics () { - if (thisObject.container.frame.isInViewPort() && canvas.chartingSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS) { + if ( + thisObject.container.frame.isInViewPort() && + canvas.chartingSpace.viewport.zoomLevel >= ZOOM_OUT_THRESHOLD_FOR_NOT_HIDDING_PANELS) { + canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Layers Panel') + canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Plotter Panel') + return + } + + if ( + thisObject.container.frame.isCenterInViewPort() && + canvas.chartingSpace.viewport.zoomLevel >= 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 { @@ -514,9 +548,23 @@ function newTimeMachine () { function drawBackground () { drawChartsBackground() if (thisObject.container.frame.isInViewPort()) { + if (drawScales === true) { + if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() } + if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() } + } + + let maxElementsPlotted = 0 for (let i = 0; i < thisObject.timelineCharts.length; i++) { let timelineChart = thisObject.timelineCharts[thisObject.timelineCharts.length - i - 1] - timelineChart.drawBackground() + let elementsPlotted = timelineChart.drawBackground() + if (elementsPlotted !== undefined) { + if (elementsPlotted > maxElementsPlotted) { + maxElementsPlotted = elementsPlotted + } + } + } + if (thisObject.timeFrameScale !== undefined) { + thisObject.timeFrameScale.adjustTimeFrame(maxElementsPlotted) } } } @@ -540,24 +588,26 @@ function newTimeMachine () { if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() } } } else { - let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type) - if (icon !== undefined) { - if (icon.canDrawIcon === true) { - let imageSize = 40 - let imagePosition = { - x: thisObject.container.frame.width / 2, - y: thisObject.container.frame.height / 2 + if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED) { + let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type) + if (icon !== undefined) { + if (icon.canDrawIcon === true) { + let imageSize = 40 + let imagePosition = { + x: thisObject.container.frame.width / 2, + y: thisObject.container.frame.height / 2 + } + + imagePosition = transformThisPoint(imagePosition, thisObject.container) + imagePosition = thisObject.fitFunction(imagePosition, true) + + browserCanvasContext.drawImage( + icon, + imagePosition.x - imageSize / 2, + imagePosition.y - imageSize / 2, + imageSize, + imageSize) } - - imagePosition = transformThisPoint(imagePosition, thisObject.container) - imagePosition = thisObject.fitFunction(imagePosition, true) - - browserCanvasContext.drawImage( - icon, - imagePosition.x - imageSize / 2, - imagePosition.y - imageSize / 2, - imageSize, - imageSize) } } } @@ -582,28 +632,172 @@ function newTimeMachine () { } function drawLabel () { + if (thisObject.payload.node === undefined) { return } + if (thisObject.payload === undefined) { return } /* Draw Title Above the Container */ let position = { x: 0, y: 0 } - let imageSize = 25 - let fontSize = 25 + let imageSize = 13 + let fontSize = 15 let opacity = 1 let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type) position = transformThisPoint(position, thisObject.container) - printLabel(thisObject.payload.node.name, position.x + 30, position.y - 10, opacity, fontSize) + + let label = thisObject.payload.node.name + let description = loadPropertyFromNodeConfig(thisObject.payload, 'description') + + if (description !== undefined) { + label = description + } + printLabel(label, position.x + 20, position.y - 10, opacity, fontSize) if (icon !== undefined) { if (icon.canDrawIcon === true) { browserCanvasContext.drawImage( - icon, position.x - 0, - position.y - 30, + icon, position.x + 5, + position.y - 22, imageSize, imageSize) } } + + imageSize = 13 + fontSize = 15 + let exchangeMarkets = new Map() + + for (let i = 0; i < thisObject.timelineCharts.length; i++) { + let timelinechart = thisObject.timelineCharts[i] + if (timelinechart.layersManager !== undefined) { + for (let j = 0; j < timelinechart.layersManager.layers.length; j++) { + let layer = timelinechart.layersManager.layers[j] + + exchangeMarket = { + exchangeName: layer.exchange.name, + marketName: layer.market, + exchangeIcon: layer.exchangeIcon, + baseAssetIcon: layer.baseAssetIcon, + quotedAssetIcon: layer.quotedAssetIcon + } + exchangeMarkets.set(exchangeMarket.exchangeName + '-' + exchangeMarket.marketName, exchangeMarket) + } + } + } + + drawTab(0, 0, exchangeMarkets.size * tabAnimationCounter, 90, thisObject.container) + + const INTER_EXCHANGE_SPACE = 60 + const INTER_MARKET_SPACE = -100 + + if (tabAnimationStatus === 'Open') { + drawMarketNames() + } + + function drawMarketNames () { + exchangeMarkets.forEach((exchangeMarket, i) => { + browserCanvasContext.save() + browserCanvasContext.translate(position.x, position.y) + browserCanvasContext.rotate(-Math.PI / 2) + + let xOffSet = -80 + + icon = exchangeMarket.exchangeIcon + + if (icon !== undefined) { + if (icon.canDrawIcon === true) { + browserCanvasContext.drawImage( + icon, + -20 + xOffSet, + -43, + imageSize, + imageSize) + } + } + + printLabel(exchangeMarket.exchangeName, -5 + xOffSet, -30, opacity, fontSize, UI_COLOR.GREY) + + position.x = position.x + INTER_EXCHANGE_SPACE + + icon = exchangeMarket.baseAssetIcon + if (icon !== undefined) { + if (icon.canDrawIcon === true) { + browserCanvasContext.drawImage( + icon, + -20 + xOffSet, + -22, + imageSize, + imageSize) + } + } + + printLabel(exchangeMarket.marketName, -5 + xOffSet, -10, opacity, fontSize, UI_COLOR.GREY) + + icon = exchangeMarket.quotedAssetIcon + if (icon !== undefined) { + if (icon.canDrawIcon === true) { + browserCanvasContext.drawImage( + icon, + +50 + xOffSet, + -22, + imageSize, + imageSize) + } + } + + position.x = position.x + INTER_MARKET_SPACE + + browserCanvasContext.restore() + }) + } + + function drawTab (x, y, width, height, container) { + const GRADIENT = 0 + const X_OFFSET = -3 + const Y_OFFSET = 13 + const TAB_CORNERS_RADIUS = 5 + + let point = { + x: x, + y: y + } + point = transformThisPoint(point, container) + + let point1 = { + x: point.x + X_OFFSET, + y: point.y + Y_OFFSET + } + + let point2 = { + x: point.x + X_OFFSET, + y: point.y + height + Y_OFFSET + } + + let point3 = { + x: point.x - width + X_OFFSET, + y: point.y + height - GRADIENT + Y_OFFSET + } + + let point4 = { + x: point.x - width + X_OFFSET, + y: point.y + GRADIENT + Y_OFFSET + } + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.arc(point3.x, point3.y - TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI) + // browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.arc(point4.x, point4.y + TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.closePath() + browserCanvasContext.lineWidth = 1 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + '' + browserCanvasContext.stroke() + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + '' + browserCanvasContext.fill() + } } function recalculateCoordinateSystem () { diff --git a/ChartingSpace/TimelineChart.js b/ChartingSpace/TimelineChart.js index ce39cf53d..f827726c0 100644 --- a/ChartingSpace/TimelineChart.js +++ b/ChartingSpace/TimelineChart.js @@ -318,6 +318,8 @@ function newTimelineChart () { } function thisObjectPhysics () { + timelineChartCoordinateSystem.reportXValue(timeMachineCoordinateSystem.min.x) + timelineChartCoordinateSystem.reportXValue(timeMachineCoordinateSystem.max.x) timelineChartCoordinateSystem.physics() } @@ -376,9 +378,17 @@ function newTimelineChart () { function drawBackground () { if (thisObject.container.frame.isInViewPort()) { + if (drawScales === true) { + if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() } + } drawChartsBackground() if (thisObject.plotterManager !== undefined) { - thisObject.plotterManager.draw() + let elementsPlotted = thisObject.plotterManager.draw() + if (thisObject.timeFrameScale !== undefined) { + thisObject.timeFrameScale.adjustTimeFrame(elementsPlotted) + } else { + return elementsPlotted + } } } } diff --git a/ChartingSpace/Viewport.js b/ChartingSpace/Viewport.js index 2a054191c..27f59ef1c 100644 --- a/ChartingSpace/Viewport.js +++ b/ChartingSpace/Viewport.js @@ -20,6 +20,7 @@ function newViewport () { } let thisObject = { + visible: false, visibleArea: undefined, width: undefined, height: undefined, @@ -29,6 +30,7 @@ function newViewport () { mousePosition: undefined, margins: MARGINS, payload: undefined, + zoomAtCenter: zoomAtCenter, changeZoom: changeZoom, onMouseWheel: onMouseWheel, transformThisPoint: transformThisPoint, @@ -38,6 +40,7 @@ function newViewport () { fitIntoVisibleArea: fitIntoVisibleArea, fitIntoViewport: fitIntoViewport, displace: displace, + displaceToContainer: displaceToContainer, physics: physics, raiseEvents: raiseEvents, resize: resize, @@ -49,14 +52,7 @@ function newViewport () { x: 0, y: 0 } - let targetPosition = { - x: 0, - y: 0 - } - let positionIncrement = { - x: 0, - y: 0 - } + thisObject.mousePosition = { x: 0, y: 0 @@ -68,6 +64,8 @@ function newViewport () { thisObject.zoomTargetLevel = MIN_ZOOM_LEVEL INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel) + let overrideMousePositionCounter = 0 + return thisObject function finalize () { @@ -128,6 +126,7 @@ function newViewport () { } function raiseEvents () { + if (thisObject.visible === false) { return } let event = { newPosition: position } @@ -135,13 +134,43 @@ function newViewport () { thisObject.eventHandler.raiseEvent('Position Changed', event) } + function displaceToContainer (container) { + let targetPoint = { + x: -container.frame.position.x - container.frame.width / 2, + y: -container.frame.position.y - container.frame.height / 2 + } + position.x = targetPoint.x + browserCanvas.width / 2 + position.y = targetPoint.y + (browserCanvas.height - COCKPIT_SPACE_HEIGHT - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT + } + + function zoomAtCenter (level) { + thisObject.zoomTargetLevel = level + overrideMousePositionCounter = 50 + ANIMATION_INCREMENT = 0.5 + } + + function mousePositionPhysics () { + if (overrideMousePositionCounter > 0) { + thisObject.mousePosition.x = browserCanvas.width / 2 + thisObject.mousePosition.y = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT + + overrideMousePositionCounter-- + if (overrideMousePositionCounter < 0) { + overrideMousePositionCounter = 0 + } + } + } + function physics () { + if (thisObject.visible === false) { return } + mousePositionPhysics() animationPhysics() positioningPhysics() readObjectState() } function positioningPhysics () { + if (thisObject.visible === false) { return } if (thisObject.payload === undefined) { return } /* Save the position at the frame lavel */ let frame = {} @@ -152,37 +181,28 @@ function newViewport () { function animationPhysics () { if (thisObject.zoomLevel < thisObject.zoomTargetLevel) { if (thisObject.zoomTargetLevel - thisObject.zoomLevel < ANIMATION_INCREMENT) { - ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) + ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100 } - thisObject.zoomLevel = thisObject.zoomLevel + ANIMATION_INCREMENT + thisObject.zoomLevel = Math.round((thisObject.zoomLevel + ANIMATION_INCREMENT) * 100) / 100 changeZoom(thisObject.zoomLevel - ANIMATION_INCREMENT, thisObject.zoomLevel) } if (thisObject.zoomLevel > thisObject.zoomTargetLevel) { if (thisObject.zoomLevel - thisObject.zoomTargetLevel < ANIMATION_INCREMENT) { - ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) + ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100 } - thisObject.zoomLevel = thisObject.zoomLevel - ANIMATION_INCREMENT + thisObject.zoomLevel = Math.round((thisObject.zoomLevel - ANIMATION_INCREMENT) * 100) / 100 changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel) } - - if (positionIncrement.y !== 0) { - if (Math.trunc(Math.abs(targetPosition.y - position.y) * 1000) >= Math.trunc(Math.abs(positionIncrement.y) * 1000)) { - position.y = position.y + positionIncrement.y - } else { - positionIncrement.y = 0 - } - } } function onMouseWheel (event) { + if (thisObject.visible === false) { return } if ((event.ctrlKey === true || event.metaKey === true)) { return } let morePower = 1 let amount = event.delta if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed. /* We adjust the sensitivity for Mac Users */ - let isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0 - if (isMac) { amount = amount / 5 } if (thisObject.zoomTargetLevel > 10) { amount = amount * 2 @@ -200,9 +220,9 @@ function newViewport () { if (thisObject.zoomTargetLevel + amount * morePower < MIN_ZOOM_LEVEL) { return false } - thisObject.zoomTargetLevel = thisObject.zoomTargetLevel + amount * morePower + thisObject.zoomTargetLevel = Math.round((thisObject.zoomTargetLevel + amount * morePower) * MAC_AMOUNT_FACTOR) / MAC_AMOUNT_FACTOR - ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / ANIMATION_STEPS + ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / ANIMATION_STEPS * 100) / 100 let newEvent = { newLevel: thisObject.zoomTargetLevel, @@ -259,6 +279,7 @@ function newViewport () { } function displace (displaceVector, recalculate) { + if (thisObject.visible === false) { return } position.x = position.x + displaceVector.x position.y = position.y + displaceVector.y @@ -273,28 +294,20 @@ function newViewport () { } function changeZoom (oldLevel, newLevel) { + if (thisObject.visible === false) { return } let oldMouse = unTransformThisPoint(thisObject.mousePosition, oldLevel) let newMouse = transformThisPoint(oldMouse, newLevel) position.x = position.x - newMouse.x + thisObject.mousePosition.x position.y = position.y - newMouse.y + thisObject.mousePosition.y - let testPoint = unTransformThisPoint(thisObject.mousePosition, newLevel) - saveObjectState() - targetPosition.x = position.x - targetPosition.y = position.y - - positionIncrement = { - x: 0, - y: 0 - } - thisObject.eventHandler.raiseEvent('Zoom Changed') } function transformThisPoint (point, level) { + if (thisObject.visible === false) { return } let transformedPoint = { x: 0, y: 0 @@ -328,6 +341,7 @@ function newViewport () { } function isThisPointVisible (point) { + if (thisObject.visible === false) { return } 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 { @@ -336,6 +350,7 @@ function newViewport () { } function isThisPointInViewport (point) { + if (thisObject.visible === false) { return } if (point.y > COCKPIT_SPACE_POSITION) { return false } else { @@ -382,7 +397,7 @@ function newViewport () { } function newZoomLevel (level) { - thisObject.zoomLevel = level + thisObject.zoomLevel = Math.round(level) thisObject.zoomTargetLevel = level INITIAL_TIME_PERIOD = recalculatePeriod(level) saveObjectState() diff --git a/CockpitSpace/AssetBalances.js b/CockpitSpace/AssetBalances.js index 6cb267ef4..166a68880 100644 --- a/CockpitSpace/AssetBalances.js +++ b/CockpitSpace/AssetBalances.js @@ -1,5 +1,5 @@ -function newQuotedAssetalances () { +function newAssetalances () { const MODULE_NAME = 'Asset Balances' let thisObject = { @@ -38,6 +38,9 @@ function newQuotedAssetalances () { let speedometer = newSpeedometer() speedometer.initialize() + speedometer.container.connectToParent(thisObject.container) + speedometer.container.frame.position.x = thisObject.container.frame.width / 2 + speedometer.container.frame.position.y = thisObject.container.frame.height * (2 + i * 2) / 5 thisObject.speedometers.push(speedometer) } } diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js index 7a2f0a857..12f8cc14e 100644 --- a/CockpitSpace/Speedometer.js +++ b/CockpitSpace/Speedometer.js @@ -56,12 +56,14 @@ function newSpeedometer () { const OPACITY = 1 let centerPoint = { - x: thisObject.params.LEFT_OFFSET, - y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - 9 + x: 0, + y: 0 } + centerPoint = thisObject.container.frame.frameThisPoint(centerPoint) + browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.85 * Math.PI, 2.15 * Math.PI) + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' @@ -196,8 +198,8 @@ function newSpeedometer () { if (isNaN(label) === false) { label = Number(label) - label = Math.trunc(label * Math.pow(10, thisObject.params.DECIMALS)) / Math.pow(10, thisObject.params.DECIMALS) - if (label === 0) { label = label.toFixed(2) } else { label = label.toLocaleString() } + label = dynamicDecimals(label, 2) + if (label === 0) { label = label.toFixed(2) } } // label = label.substring(0, 6) diff --git a/DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js b/DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js new file mode 100644 index 000000000..ced087469 --- /dev/null +++ b/DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js @@ -0,0 +1,218 @@ +function newCCXTFunctions () { + thisObject = { + addMissingExchanges: addMissingExchanges, + addMissingAssets: addMissingAssets, + addMissingMarkets: addMissingMarkets + } + + return thisObject + + function addMissingExchanges (node, functionLibraryUiObjectsFromNodes) { + currentExchanges = new Map() + let parent = node.payload.parentNode + if (parent !== undefined) { + for (let i = 0; i < parent.cryptoExchanges.length; i++) { + let cryptoExchanges = parent.cryptoExchanges[i] + for (let j = 0; j < cryptoExchanges.exchanges.length; j++) { + let exchange = cryptoExchanges.exchanges[j] + let codeName = loadPropertyFromNodeConfig(exchange.payload, 'codeName') + currentExchanges.set(codeName, exchange) + } + } + } + + let params = { + method: 'listExchanges', + has: { + fetchOHLCV: true, + fetchMarkets: true + } + } + + callServer(JSON.stringify(params), 'CCXT', onResponse) + + function onResponse (err, data) { + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange') + return + } + + let exchanges = JSON.parse(data) + for (let i = 0; i < exchanges.length; i++) { + let exchange = exchanges[i] + let existingExchange = currentExchanges.get(exchange.id) + if (existingExchange === undefined) { + let newExchange = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Crypto Exchange') + newExchange.name = exchange.name + newExchange.code = '{ \n\"codeName\": \"' + exchange.id + '\"\n}' + newExchange.payload.floatingObject.collapseToggle() + newExchange.exchangeAssets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180 + newExchange.exchangeMarkets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180 + newExchange.exchangeAccounts.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180 + newExchange.exchangeAssets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X + newExchange.exchangeMarkets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X + newExchange.exchangeAccounts.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_025X + } + } + } + } + + function addMissingAssets (node, functionLibraryUiObjectsFromNodes) { + if (node.payload.parentNode === undefined) { return } + + let currentAssets = new Map() + for (let j = 0; j < node.assets.length; j++) { + let asset = node.assets[j] + let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName') + currentAssets.set(codeName, asset) + } + + let exchangeId = loadPropertyFromNodeConfig(node.payload.parentNode.payload, 'codeName') + + try { + let params = { + exchangeId: exchangeId, + method: 'fetchMarkets' + } + callServer(JSON.stringify(params), 'CCXT', onResponse) + + function onResponse (err, data) { + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange') + return + } + let queryParams = loadPropertyFromNodeConfig(node.payload, 'addMissingAssets') + + let markets = JSON.parse(data) + for (let i = 0; i < markets.length; i++) { + let market = markets[i] + + if (queryParams !== undefined) { + if (queryParams.baseAsset !== undefined) { + if (market.base.indexOf(queryParams.baseAsset) >= 0) { + continue + } + } + if (queryParams.quotedAsset !== undefined) { + if (market.quote.indexOf(queryParams.quotedAsset) >= 0) { + continue + } + } + } + if (currentAssets.get(market.base) === undefined) { + addAsset(market.base) + currentAssets.set(market.base, market.base) + } + if (currentAssets.get(market.quote) === undefined) { + addAsset(market.quote) + currentAssets.set(market.quote, market.quote) + } + + function addAsset (name) { + let newAsseet = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Asset') + newAsseet.name = name + newAsseet.code = '{ \n\"codeName\": \"' + name + '\"\n}' + newAsseet.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_360 + newAsseet.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_200X + } + } + } + } catch (err) { + node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange') + console.log(err.stack) + } + } + + function addMissingMarkets (node, functionLibraryUiObjectsFromNodes, functionLibraryNodeCloning) { + if (node.payload.parentNode === undefined) { return } + if (node.payload.parentNode.exchangeAssets === undefined) { return } + if (node.payload.parentNode.payload.parentNode === undefined) { return } + if (node.payload.parentNode.payload.parentNode.payload.parentNode === undefined) { return } + if (node.payload.parentNode.payload.parentNode.payload.parentNode.superActions === undefined) { return } + + let currentAssets = new Map() + let exchangeAssets = node.payload.parentNode.exchangeAssets + for (let j = 0; j < exchangeAssets.assets.length; j++) { + let asset = exchangeAssets.assets[j] + let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName') + currentAssets.set(codeName, asset) + } + + let currentMarkets = new Map() + let exchangeMarkets = node + for (let j = 0; j < exchangeMarkets.markets.length; j++) { + let asset = exchangeMarkets.markets[j] + let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName') + currentMarkets.set(codeName, asset) + } + + let exchangeId = loadPropertyFromNodeConfig(node.payload.parentNode.payload, 'codeName') + + try { + let params = { + exchangeId: exchangeId, + method: 'fetchMarkets' + } + callServer(JSON.stringify(params), 'CCXT', onResponse) + + function onResponse (err, data) { + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange') + return + } + + let markets = JSON.parse(data) + for (let i = 0; i < markets.length; i++) { + let market = markets[i] + let baseAsset = currentAssets.get(market.base) + let quotedAsset = currentAssets.get(market.quote) + + if (baseAsset === undefined) { + continue + } + if (quotedAsset === undefined) { + continue + } + + if (currentMarkets.get(market.symbol) === undefined) { + addMarket(market.symbol, baseAsset, quotedAsset) + } + + function addMarket (name, baseAsset, quotedAsset) { + let newMarket = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Market') + newMarket.name = name + newMarket.code = '{ \n\"codeName\": \"' + name + '\"\n}' + newMarket.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180 + newMarket.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X + newMarket.baseAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45 + newMarket.quotedAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45 + newMarket.baseAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X + newMarket.quotedAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_150X + newMarket.baseAsset.payload.referenceParent = baseAsset + newMarket.quotedAsset.payload.referenceParent = quotedAsset + + let superActions = node.payload.parentNode.payload.parentNode.payload.parentNode.superActions + + for (let j = 0; j < superActions.superActions.length; j++) { + let superAction = superActions.superActions[j] + let clone = functionLibraryNodeCloning.getNodeClone(superAction) + functionLibraryUiObjectsFromNodes.createUiObjectFromNode(clone, newMarket, newMarket) + newMarket.superActions.push(clone) + switch (j) { + case 0: + clone.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_025X + break + case 1: + clone.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X + break + } + } + } + } + } + } catch (err) { + node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange') + console.log(err.stack) + } + } +} diff --git a/DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js b/DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js index 586a01dbd..44dd1e1db 100644 --- a/DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js +++ b/DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js @@ -7,6 +7,7 @@ function newChainAttachDetach () { return thisObject function chainDetachNode (node, rootNodes) { + if (node.payload.parentNode === undefined) { return } switch (node.type) { case 'Phase': { let payload = node.payload diff --git a/DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js b/DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js index 46ad39fcb..6287b01b8 100644 --- a/DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js +++ b/DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js @@ -56,38 +56,40 @@ function newNodeDeleter () { } /* Remove node from parent */ - if (node.payload.parentNode !== undefined) { - let parentNodeDefinition = APP_SCHEMA_MAP.get(node.payload.parentNode.type) - if (parentNodeDefinition !== undefined) { - if (parentNodeDefinition.properties !== undefined) { - for (let i = 0; i < parentNodeDefinition.properties.length; i++) { - let property = parentNodeDefinition.properties[i] - if (nodeDefinition.propertyNameAtParent === property.name) { - switch (property.type) { - case 'node': { - node.payload.parentNode[property.name] = undefined - } - break - case 'array': { - let nodePropertyArray = node.payload.parentNode[property.name] - if (nodePropertyArray !== undefined) { - for (let j = 0; j < nodePropertyArray.length; j++) { - let arrayItem = nodePropertyArray[j] - if (arrayItem.id === node.id) { + if (node.payload !== undefined) { + if (node.payload.parentNode !== undefined) { + let parentNodeDefinition = APP_SCHEMA_MAP.get(node.payload.parentNode.type) + if (parentNodeDefinition !== undefined) { + if (parentNodeDefinition.properties !== undefined) { + for (let i = 0; i < parentNodeDefinition.properties.length; i++) { + let property = parentNodeDefinition.properties[i] + if (nodeDefinition.propertyNameAtParent === property.name) { + switch (property.type) { + case 'node': { + node.payload.parentNode[property.name] = undefined + } + break + case 'array': { + let nodePropertyArray = node.payload.parentNode[property.name] + if (nodePropertyArray !== undefined) { + for (let j = 0; j < nodePropertyArray.length; j++) { + let arrayItem = nodePropertyArray[j] + if (arrayItem.id === node.id) { /* If this object is chained to the ones of the same type we need to give the next in the chain the reference to the current chain parent */ - if (nodeDefinition.chainedToSameType === true) { - if (j < nodePropertyArray.length - 1) { - let nextArrayItem = nodePropertyArray[j + 1] - nextArrayItem.payload.chainParent = node.payload.chainParent + if (nodeDefinition.chainedToSameType === true) { + if (j < nodePropertyArray.length - 1) { + let nextArrayItem = nodePropertyArray[j + 1] + nextArrayItem.payload.chainParent = node.payload.chainParent + } } - } - nodePropertyArray.splice(j, 1) + nodePropertyArray.splice(j, 1) + } } } } + break } - break } } } @@ -112,6 +114,9 @@ function newNodeDeleter () { } function cleanNode (node) { + if (node.payload === undefined) { return } + if (node === undefined) { return } + node.payload.targetPosition.x = undefined node.payload.targetPosition.y = undefined node.payload.visible = undefined diff --git a/DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js b/DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js index cdf5385dc..68d2cf69f 100644 --- a/DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js +++ b/DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js @@ -20,5 +20,8 @@ function newReferenceAttachDetach () { function completeDetachment (node) { node.payload.referenceParent = undefined + if (node.savedPayload !== undefined) { + node.savedPayload.referenceParent = undefined + } } } diff --git a/DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js b/DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js index 5b967b29d..7257e42ba 100644 --- a/DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js +++ b/DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js @@ -33,7 +33,7 @@ function newSessionFunctions () { let lightingPath = '' + 'Trading System->' + 'Parameters->' + - 'Base Asset->Time Range->Time Frame->Slippage->Fee Structure->' + + 'Base Asset->Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->' + 'Exchange Account Asset->Asset->' + 'Strategy->' + 'Trigger Stage->Trigger On Event->Trigger Off Event->Take Position Event->' + @@ -53,7 +53,7 @@ function newSessionFunctions () { lightingPath = '' + 'Backtesting Session->Paper Trading Session->Fordward Testing Session->Live Trading Session->' + 'Parameters->' + - 'Base Asset->Time Range->Time Frame->Slippage->Fee Structure->' + + 'Base Asset->Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->' + 'Exchange Account Asset->Asset->' let session = functionLibraryProtocolNode.getProtocolNode(node, false, true, true, false, false, lightingPath) diff --git a/DesignSpace/Workspace/FunctionLibraries/SuperScripts.js b/DesignSpace/Workspace/FunctionLibraries/SuperScripts.js new file mode 100644 index 000000000..3965fe328 --- /dev/null +++ b/DesignSpace/Workspace/FunctionLibraries/SuperScripts.js @@ -0,0 +1,90 @@ +function newSuperScriptsFunctions () { + thisObject = { + runSuperScript: runSuperScript + } + + return thisObject + + function runSuperScript (node, rootNodes, functionLibraryNodeCloning, functionLibraryUiObjectsFromNodes, functionLibraryNodeDeleter) { + try { + let clone = functionLibraryNodeCloning.getNodeClone + let executionResult = true + let superAction = node + + function setup (templateClone, target, exchange, exchangeNodeType, arrayPropertyName) { + spawnPosition.x = target.payload.position.x + spawnPosition.y = target.payload.position.y + + if (exchange === undefined) { + functionLibraryUiObjectsFromNodes.createUiObjectFromNode(templateClone, target, target) + } else { + let definition = APP_SCHEMA_MAP.get(target.type) + for (let i = 0; i < definition.properties.length; i++) { + let property = definition.properties[i] + if (property.childType === exchangeNodeType) { + let exchanges = target[property.name] + if (exchanges === undefined) { + exchanges = [] + } + let targetExchange + for (let j = 0; j < exchanges.length; j++) { + let thisExchange = exchanges[j] + if (thisExchange.payload.referenceParent !== undefined) { + if (thisExchange.payload.referenceParent.id === exchange.id) { + targetExchange = thisExchange + } + } + } + if (targetExchange === undefined) { + targetExchange = functionLibraryUiObjectsFromNodes.addUIObject(target, exchangeNodeType) + targetExchange.payload.referenceParent = exchange + } + let nodesArray = targetExchange[arrayPropertyName] + nodesArray.push(templateClone) + functionLibraryUiObjectsFromNodes.createUiObjectFromNode(templateClone, targetExchange, targetExchange) + } + } + } + } + + function deleteNode (node) { + functionLibraryNodeDeleter.deleteUIObject(node, rootNodes) + } + + /* Validations */ + if (executionResult === true && node.payload.parentNode === undefined) { + node.payload.uiObject.setErrorMessage('Super Action node needs a Parent Node.') + executionResult = false + } + if (executionResult === true && node.payload.referenceParent === undefined) { + node.payload.uiObject.setErrorMessage('Super Action node needs to reference a Master Script Node.') + executionResult = false + } + if (executionResult === true && node.payload.referenceParent.javascriptCode === undefined) { + node.payload.uiObject.setErrorMessage('Master Script Node needs to have a child Javascript Code Node.') + executionResult = false + } + + let masterScript = node.payload.referenceParent + + eval(masterScript.javascriptCode.code) + + let masterScriptInstance = newNewMasterScriptInstance() + + if (executionResult === true) { + executionResult = masterScriptInstance.runValidations(superAction, masterScript) + } + if (executionResult === true) { + executionResult = masterScriptInstance.runScript(superAction, masterScript) + } + if (executionResult === true) { + superAction.payload.uiObject.setValue('Execution Completed Successfully') + } else { + superAction.payload.uiObject.setValue('Execution Failed') + } + } catch (err) { + superAction.payload.uiObject.setErrorMessage(err.message) + superAction.payload.uiObject.setValue('Execution Failed') + } + } +} diff --git a/DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js b/DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js index ff624cb88..330c6d668 100644 --- a/DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js +++ b/DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js @@ -3,7 +3,11 @@ function newTaskFunctions () { runTask: runTask, stopTask: stopTask, runAllTasks: runAllTasks, - stopAllTasks: stopAllTasks + stopAllTasks: stopAllTasks, + runAllTaskManagers: runAllTaskManagers, + stopAllTaskManagers: stopAllTaskManagers, + runAllExchangeTasks: runAllExchangeTasks, + stopAllExchangeTasks: stopAllExchangeTasks } return thisObject @@ -77,9 +81,9 @@ function newTaskFunctions () { taskId: node.id, taskName: node.name } - systemEventHandler.raiseEvent('Task Manager', 'Stop Task', event) node.payload.uiObject.stop(callBackFunction) + systemEventHandler.raiseEvent('Task Manager', 'Stop Task', event) if (node.bot === undefined) { return } if (node.bot.processes.length === 0) { return } @@ -107,4 +111,43 @@ function newTaskFunctions () { menu.internalClick('Stop Task') } } + + function runAllTaskManagers (parent, functionLibraryProtocolNode) { + for (let i = 0; i < parent.taskManagers.length; i++) { + let node = parent.taskManagers[i] + let menu = node.payload.uiObject.menu + + menu.internalClick('Run All Tasks') + menu.internalClick('Run All Tasks') + } + } + + function stopAllTaskManagers (parent, functionLibraryProtocolNode) { + for (let i = 0; i < parent.taskManagers.length; i++) { + let node = parent.taskManagers[i] + let menu = node.payload.uiObject.menu + + menu.internalClick('Stop All Tasks') + menu.internalClick('Stop All Tasks') + } + } + function runAllExchangeTasks (parent, functionLibraryProtocolNode) { + for (let i = 0; i < parent.exchangeTasks.length; i++) { + let node = parent.exchangeTasks[i] + let menu = node.payload.uiObject.menu + + menu.internalClick('Run All Task Managers') + menu.internalClick('Run All Task Managers') + } + } + + function stopAllExchangeTasks (parent, functionLibraryProtocolNode) { + for (let i = 0; i < parent.exchangeTasks.length; i++) { + let node = parent.exchangeTasks[i] + let menu = node.payload.uiObject.menu + + menu.internalClick('Stop All Task Managers') + menu.internalClick('Stop All Task Managers') + } + } } diff --git a/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js b/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js index 96f7bfef3..772681f5c 100644 --- a/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js +++ b/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js @@ -159,102 +159,92 @@ function newUiObjectsFromNodes () { } let parentNodeDefinition = APP_SCHEMA_MAP.get(parentNode.type) - if (parentNodeDefinition !== undefined) { + if (parentNodeDefinition === undefined) { + console.log('Cannot addUIOBject from parent of ' + type + ' because that type it is not defined at the APP_SCHEMA.') + } /* Resolve Initial Values */ - let nodeDefinition = APP_SCHEMA_MAP.get(object.type) + let nodeDefinition = APP_SCHEMA_MAP.get(object.type) - if (nodeDefinition.isHierarchyHead === true) { - parentNode.rootNodes.push(object) - createUiObject(true, object.type, object.name, object, parentNode, undefined) - return object + if (nodeDefinition === undefined) { + console.log('Cannot addUIOBject of ' + type + ' because that type it is not defined at the APP_SCHEMA.') + } + + if (nodeDefinition.initialValues !== undefined) { + if (nodeDefinition.initialValues.code !== undefined) { + object.code = nodeDefinition.initialValues.code } + } + + if (nodeDefinition.isHierarchyHead === true) { + parentNode.rootNodes.push(object) + createUiObject(true, object.type, object.name, object, parentNode, undefined) + return object + } /* For the cases where an node is not chained to its parent but to the one at the parent before it at its collection */ - let chainParent = parentNode - if (nodeDefinition.chainedToSameType === true) { - if (parentNodeDefinition.properties !== undefined) { - for (let i = 0; i < parentNodeDefinition.properties.length; i++) { - let property = parentNodeDefinition.properties[i] - if (property.childType === type) { - if (property.type === 'array') { - if (parentNode[property.name] !== undefined) { - if (parentNode[property.name].length > 0) { - let nodeChildren = parentNode[property.name] - chainParent = nodeChildren[nodeChildren.length - 1] - } - } - } - } - } - } - } - - if (nodeDefinition !== undefined) { - if (nodeDefinition.initialValues !== undefined) { - if (nodeDefinition.initialValues.code !== undefined) { - object.code = nodeDefinition.initialValues.code - } - } - } - - /* Connect to Parent */ + let chainParent = parentNode + if (nodeDefinition.chainedToSameType === true) { if (parentNodeDefinition.properties !== undefined) { - let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children. for (let i = 0; i < parentNodeDefinition.properties.length; i++) { let property = parentNodeDefinition.properties[i] if (property.childType === type) { - switch (property.type) { - case 'node': { - if (property.name !== previousPropertyName) { - parentNode[property.name] = object - previousPropertyName = property.name + if (property.type === 'array') { + if (parentNode[property.name] !== undefined) { + if (parentNode[property.name].length > 0) { + let nodeChildren = parentNode[property.name] + chainParent = nodeChildren[nodeChildren.length - 1] } } - break - case 'array': { - if (parentNode[property.name] === undefined) { - parentNode[property.name] = [] - } - if (property.maxItems !== undefined) { - if (parentNode[property.name].length < property.maxItems) { - parentNode[property.name].push(object) - } else { - return // Object can not be created. - } - } else { - parentNode[property.name].push(object) - } - } - break } } } } + } - createUiObject(true, object.type, object.name, object, parentNode, chainParent) + /* Create Empty Arrays for properties of type Array */ + if (nodeDefinition.properties !== undefined) { + for (let i = 0; i < nodeDefinition.properties.length; i++) { + let property = nodeDefinition.properties[i] + if (property.type === 'array') { + object[property.name] = [] + } + } + } - /* Auto Add more Children */ - if (nodeDefinition.properties !== undefined) { - let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children. - for (let i = 0; i < nodeDefinition.properties.length; i++) { - let property = nodeDefinition.properties[i] + if (nodeDefinition !== undefined) { + if (nodeDefinition.initialValues !== undefined) { + if (nodeDefinition.initialValues.code !== undefined) { + object.code = nodeDefinition.initialValues.code + } + } + } + /* Connect to Parent */ + if (parentNodeDefinition.properties !== undefined) { + let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children. + for (let i = 0; i < parentNodeDefinition.properties.length; i++) { + let property = parentNodeDefinition.properties[i] + if (property.childType === type) { switch (property.type) { case 'node': { if (property.name !== previousPropertyName) { - if (property.autoAdd === true) { - addUIObject(object, property.childType) - previousPropertyName = property.name - } + parentNode[property.name] = object + previousPropertyName = property.name } } break case 'array': { - if (property.autoAdd === true) { - if (object[property.name] === undefined) { - object[property.name] = [] + if (parentNode[property.name] === undefined) { + parentNode[property.name] = [] + } + if (property.maxItems !== undefined) { + if (parentNode[property.name].length < property.maxItems) { + parentNode[property.name].push(object) + } else { + return // Object can not be created. } - addUIObject(object, property.childType) + } else { + parentNode[property.name].push(object) } } break @@ -262,6 +252,38 @@ function newUiObjectsFromNodes () { } } } + + createUiObject(true, object.type, object.name, object, parentNode, chainParent) + + /* Auto Add more Children */ + if (nodeDefinition.properties !== undefined) { + let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children. + for (let i = 0; i < nodeDefinition.properties.length; i++) { + let property = nodeDefinition.properties[i] + + switch (property.type) { + case 'node': { + if (property.name !== previousPropertyName) { + if (property.autoAdd === true) { + addUIObject(object, property.childType) + previousPropertyName = property.name + } + } + } + break + case 'array': { + if (property.autoAdd === true) { + if (object[property.name] === undefined) { + object[property.name] = [] + } + addUIObject(object, property.childType) + } + } + break + } + } + } + return object } @@ -389,6 +411,27 @@ function newUiObjectsFromNodes () { node.payload = payload node.type = uiObjectType + /* + Now we copy the possible frame saved to the payload where it can be used. A saved frame stores the position of a a chartingSpace object related to a node. + This will prevent that if those charting space objects never get activated, that the frame information is lost when the workspace is saved. + */ + if (node.savedPayload !== undefined) { + if (node.savedPayload.frame !== undefined) { + let frame = { + position: { + x: 0, + y: 0 + } + } + frame.position.x = node.savedPayload.frame.position.x + frame.position.y = node.savedPayload.frame.position.y + frame.width = node.savedPayload.frame.width + frame.height = node.savedPayload.frame.height + frame.radius = node.savedPayload.frame.radius + saveFrame(payload, frame) + } + } + /* Now we mount the floating object where the UIOBject will be laying on top of */ canvas.floatingSpace.uiObjectConstructor.createUiObject(userAddingNew, payload) @@ -397,7 +440,9 @@ function newUiObjectsFromNodes () { /* Check if there are tasks to run */ if (userAddingNew === false && uiObjectType === 'Task' && node.savedPayload !== undefined) { if (node.savedPayload.uiObject.isRunning === true) { - tasksToRun.push(node) + if (node.payload.parentNode !== undefined) { + tasksToRun.push(node) + } } } @@ -405,7 +450,9 @@ function newUiObjectsFromNodes () { if (userAddingNew === false && node.savedPayload !== undefined) { if (uiObjectType === 'Live Trading Session' || uiObjectType === 'Fordward Testing Session' || uiObjectType === 'Backtesting Session' || uiObjectType === 'Paper Trading Session') { if (node.savedPayload.uiObject.isRunning === true) { - sessionsToRun.push(node) + if (node.payload.parentNode !== undefined) { + sessionsToRun.push(node) + } } } } diff --git a/DesignSpace/Workspace/Workspace.js b/DesignSpace/Workspace/Workspace.js index e9075d8a7..48e48b21c 100644 --- a/DesignSpace/Workspace/Workspace.js +++ b/DesignSpace/Workspace/Workspace.js @@ -11,6 +11,7 @@ function newWorkspace () { container: undefined, enabled: false, nodeChildren: undefined, + getHierarchyHeads: getHierarchyHeads, getNodeThatIsOnFocus: getNodeThatIsOnFocus, getNodeByShortcutKey: getNodeByShortcutKey, stopAllRunningTasks: stopAllRunningTasks, @@ -56,6 +57,8 @@ function newWorkspace () { let functionLibrarySessionFunctions = newSessionFunctions() let functionLibraryShortcutKeys = newShortcutKeys() let functionLibraryOnFocus = newOnFocus() + let functionLibrarySuperScripts = newSuperScriptsFunctions() + let functionLibraryCCXTFunctions = newCCXTFunctions() thisObject.nodeChildren = newNodeChildren() @@ -80,15 +83,14 @@ function newWorkspace () { let savedWorkspace = window.localStorage.getItem(CANVAS_APP_NAME + '.' + 'Workspace') if (savedWorkspace === null) { - thisObject.workspaceNode.type = 'Workspace' - thisObject.workspaceNode.name = 'My Workspace' + thisObject.workspaceNode = getWorkspace() } else { thisObject.workspaceNode = JSON.parse(savedWorkspace) } functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode) thisObject.enabled = true - setInterval(saveWorkspace, 5000) + setInterval(saveWorkspace, 10000) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } } @@ -183,22 +185,16 @@ function newWorkspace () { for (let j = 0; j < rootNode.networkNodes.length; j++) { let networkNode = rootNode.networkNodes[j] 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') - } + networkNode.dataMining.payload.uiObject.menu.internalClick('Stop All Exchange Tasks') + networkNode.dataMining.payload.uiObject.menu.internalClick('Stop All Exchange 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') - } + networkNode.testingEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange Tasks') + networkNode.testingEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange 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') - } + networkNode.productionEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange Tasks') + networkNode.productionEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange Tasks') } } } @@ -222,6 +218,20 @@ function newWorkspace () { } } + function getHierarchyHeads () { + let nodes = [] + for (let i = 0; i < thisObject.workspaceNode.rootNodes.length; i++) { + let rootNode = thisObject.workspaceNode.rootNodes[i] + let nodeDefinition = APP_SCHEMA_MAP.get(rootNode.type) + if (nodeDefinition !== undefined) { + if (nodeDefinition.isHierarchyHead === true) { + nodes.push(rootNode) + } + } + } + return nodes + } + function spawn (nodeText, mousePointer) { try { let point = { @@ -356,6 +366,42 @@ function newWorkspace () { functionLibraryTaskFunctions.stopAllTasks(payload.node, functionLibraryProtocolNode) } break + case 'Run All Task Managers': + { + functionLibraryTaskFunctions.runAllTaskManagers(payload.node, functionLibraryProtocolNode) + } + break + case 'Stop All Task Managers': + { + functionLibraryTaskFunctions.stopAllTaskManagers(payload.node, functionLibraryProtocolNode) + } + break + case 'Run All Exchange Tasks': + { + functionLibraryTaskFunctions.runAllExchangeTasks(payload.node, functionLibraryProtocolNode) + } + break + case 'Stop All Exchange Tasks': + { + functionLibraryTaskFunctions.stopAllExchangeTasks(payload.node, functionLibraryProtocolNode) + } + break + case 'Add Missing Crypto Exchanges': + { + functionLibraryCCXTFunctions.addMissingExchanges(payload.node, functionLibraryUiObjectsFromNodes) + } + break + case 'Add Missing Assets': + { + functionLibraryCCXTFunctions.addMissingAssets(payload.node, functionLibraryUiObjectsFromNodes) + } + break + case 'Add Missing Markets': + { + functionLibraryCCXTFunctions.addMissingMarkets(payload.node, functionLibraryUiObjectsFromNodes, functionLibraryNodeCloning) + } + break + case 'Run Session': { functionLibrarySessionFunctions.runSession(payload.node, functionLibraryProtocolNode, callBackFunction) @@ -366,6 +412,32 @@ function newWorkspace () { functionLibrarySessionFunctions.stopSession(payload.node, functionLibraryProtocolNode, callBackFunction) } break + case 'Run Super Action': + { + functionLibrarySuperScripts.runSuperScript(payload.node, thisObject.workspaceNode.rootNodes, functionLibraryNodeCloning, functionLibraryUiObjectsFromNodes, functionLibraryNodeDeleter) + } + break + case 'Remove Parent': + { + chainDetachNode(payload.node) + } + break + case 'Remove Reference': + { + referenceDetachNode(payload.node) + } + break + case 'Open Documentation': + { + let definition = APP_SCHEMA_MAP.get(payload.node.type) + if (definition !== undefined) { + if (definition.docURL !== undefined) { + let newTab = window.open(definition.docURL, '_blank') + newTab.focus() + } + } + } + break } } } diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 0e81863c4..93a940068 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -49,7 +49,7 @@ function newCircularMenu () { let iconAndTextArray = [] let iconOnlyArray - let ringsArray = [[], [], []] + let ringsArray = [[], [], [], []] for (let i = 0; i < menuItemsInitialValues.length; i++) { let menuItem = newCircularMenuItem() @@ -103,15 +103,18 @@ function newCircularMenu () { menuItems.push(menuItem) } - /* There are 3 possible rings of icons, we will go through each of them here. */ - let amplitudeArray = [80, 50, 40] - let initialAngleArray = [220, 205, 200] - for (let j = 1; j < 4; j++) { + /* There are 4 possible rings of icons, we will go through each of them here. */ + let amplitudeArray = [80, 50, 40, 80] + let initialAngleArray = [220, 205, 200, 180] + for (let j = 1; j < ringsArray.length + 1; j++) { let iconOnlyArray = ringsArray[j - 1] /* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */ let amplitude = amplitudeArray[j - 1] let initialAngle = initialAngleArray[j - 1] let step = amplitude / (iconOnlyArray.length - 1) + if (iconOnlyArray.length === 1) { + step = 0 + } for (let i = 0; i < iconOnlyArray.length; i++) { let menuItem = iconOnlyArray[i] diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index b54779f50..ca2d77c7e 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -57,7 +57,7 @@ function newCircularMenuItem () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 thisObject.container.frame.width = 0 - thisObject.container.frame.height = 30 + thisObject.container.frame.height = 40 let isMouseOver = false @@ -112,7 +112,7 @@ function newCircularMenuItem () { selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) if (thisObject.type === 'Icon & Text') { - thisObject.container.frame.width = 150 + thisObject.container.frame.width = 220 } else { thisObject.container.frame.width = 50 } @@ -150,15 +150,19 @@ function newCircularMenuItem () { if (thisObject.type === 'Icon Only') { switch (thisObject.ring) { case 1: { - radiusGrowthFactor = 5 + radiusGrowthFactor = 6.5 break } case 2: { - radiusGrowthFactor = 3.5 + radiusGrowthFactor = 5.0 break } case 3: { - radiusGrowthFactor = 2 + radiusGrowthFactor = 3.5 + break + } + case 4: { + radiusGrowthFactor = 2.5 break } } @@ -275,6 +279,7 @@ function newCircularMenuItem () { /* A Click during confirmation executes the pre-defined action. */ if (temporaryStatus === STATUS_WAITING_CONFIRMATION || temporaryStatus === STATUS_PRIMARY_WORK_DONE) { executeAction() + setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE) return } } @@ -370,13 +375,13 @@ function newCircularMenuItem () { backgroundColor = UI_COLOR.GREY } let params = { - cornerRadius: 3, + cornerRadius: 5, lineWidth: 0.1, container: thisObject.container, borderColor: UI_COLOR.DARK, backgroundColor: backgroundColor, castShadow: false, - xOffset: 40 + xOffset: 60 } if (isMouseOver === true) { @@ -417,13 +422,13 @@ function newCircularMenuItem () { if (thisObject.type === 'Icon & Text') { let labelPoint - let fontSize = 10 + let fontSize = 15 browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY if (thisObject.currentRadius >= thisObject.targetRadius) { labelPoint = { - x: menuPosition.x + thisObject.currentRadius + 20, + x: menuPosition.x + thisObject.currentRadius + 25, y: menuPosition.y + fontSize * FONT_ASPECT_RATIO } diff --git a/FloatingSpace/CircularProgressBar.js b/FloatingSpace/CircularProgressBar.js index 0e59f3cf5..5a9c64d8d 100644 --- a/FloatingSpace/CircularProgressBar.js +++ b/FloatingSpace/CircularProgressBar.js @@ -55,10 +55,21 @@ function newCircularProgressBar () { if (thisObject.payload === undefined) { return } if (thisObject.payload.uiObject === undefined) { return } opacityCounters[message.event.seconds] = 2000 - thisObject.payload.uiObject.setValue(message.event.processingDate) + if (message.event.processingDate !== undefined) { + thisObject.payload.uiObject.setValue(message.event.processingDate, 2000) + } + if (message.event.percentage !== undefined) { + thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000) + } + if (message.event.status !== undefined) { + thisObject.payload.uiObject.setStatus(message.event.status, 200000) + } + + thisObject.payload.uiObject.heartBeat() } function getContainer (point) { + if (canvas.floatingSpace.inMapMode === true) { return } let container for (let i = 0; i < menuItems.length; i++) { @@ -83,6 +94,7 @@ function newCircularProgressBar () { } function drawBackground (pFloatingObject) { + if (canvas.floatingSpace.inMapMode === true) { return } const VISIBLE_RADIUS = thisObject.container.frame.radius * 2 let visiblePosition = { diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index cffba932a..e88d72a87 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -90,7 +90,7 @@ function newCodeEditor () { 'box-shadow: none;' + 'overflow:hidden;' + 'font-family: ' + UI_FONT.PRIMARY + ';' + - 'font-size: 12px;' + + 'font-size: 14px;' + 'background-color: rgb(' + UI_COLOR.RUSTED_RED + ');' + 'color:rgb(255, 255, 255);' + 'width: ' + thisObject.container.frame.width + 'px;' + @@ -129,8 +129,8 @@ function newCodeEditor () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * 2 - thisObject.container.frame.height = thisObject.container.frame.radius * 1 * 2 + thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * 1.5 + thisObject.container.frame.height = thisObject.container.frame.radius * 1 * 1.4 let textAreaPosition = { x: 0 - thisObject.container.frame.width / 2, @@ -162,7 +162,7 @@ function newCodeEditor () { position = thisObject.container.frame.frameThisPoint(position) - let radius = thisObject.container.frame.radius * 2 + let radius = thisObject.container.frame.radius * 1.5 if (radius > 0.5) { browserCanvasContext.beginPath() diff --git a/FloatingSpace/ConditionEditor.js b/FloatingSpace/ConditionEditor.js index 373c5def7..b1b66d599 100644 --- a/FloatingSpace/ConditionEditor.js +++ b/FloatingSpace/ConditionEditor.js @@ -90,7 +90,7 @@ function newConditionEditor () { 'box-shadow: none;' + 'overflow:hidden;' + 'font-family: ' + UI_FONT.PRIMARY + ';' + - 'font-size: 12px;' + + 'font-size: 14px;' + 'background-color: rgb(' + UI_COLOR.GREEN + ');' + 'color:rgb(255, 255, 255);' + 'width: ' + thisObject.container.frame.width + 'px;' + diff --git a/FloatingSpace/ConfigEditor.js b/FloatingSpace/ConfigEditor.js index 83048c84a..920c90a76 100644 --- a/FloatingSpace/ConfigEditor.js +++ b/FloatingSpace/ConfigEditor.js @@ -34,7 +34,7 @@ function newConfigEditor () { thisObject.container.frame.position.y = 0 let isMouseOver = false - let SIZE_FACTOR = 0.6 + let SIZE_FACTOR = 0.8 return thisObject @@ -97,7 +97,7 @@ function newConfigEditor () { 'box-shadow: none;' + 'overflow:hidden;' + 'font-family: ' + UI_FONT.PRIMARY + ';' + - 'font-size: 12px;' + + 'font-size: 14px;' + 'background-color: rgb(' + UI_COLOR.DARK_TURQUOISE + ');' + 'color:rgb(255, 255, 255);' + 'width: ' + thisObject.container.frame.width + 'px;' + diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 621404fbb..8be7ec11f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -24,7 +24,6 @@ function newFloatingLayer () { removeFloatingObject: removeFloatingObject, getFloatingObject: getFloatingObject, physics: physics, - changeTargetRepulsion: changeTargetRepulsion, draw: draw, getContainer: getContainer, initialize: initialize, @@ -200,10 +199,24 @@ function newFloatingLayer () { } } + function collapsePhysics (thisObject) { + let parent = thisObject.payload.chainParent + if (parent === undefined) { return } + if (parent.payload === undefined) { return } + if (parent.payload.floatingObject === undefined) { return } + + thisObject.isParentCollapsed = parent.payload.floatingObject.isCollapsed + if (thisObject.collapsedManually === false) { + thisObject.isCollapsed = parent.payload.floatingObject.isCollapsed + } + } + function makeVisible () { for (let i = 0; i < invisibleFloatingObjects.length; i++) { let floatingObject = invisibleFloatingObjects[i] + collapsePhysics(floatingObject) + if (floatingObject.isFrozen === false && floatingObject.isParentCollapsed === false) { visibleFloatingObjects.push(floatingObject) invisibleFloatingObjects.splice(i, 1) // Delete item from array. @@ -217,6 +230,8 @@ function newFloatingLayer () { for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[i] + collapsePhysics(floatingObject) + if (floatingObject.isFrozen === true || floatingObject.isParentCollapsed === true) { invisibleFloatingObjects.push(floatingObject) visibleFloatingObjects.splice(i, 1) // Delete item from array. @@ -256,10 +271,8 @@ function newFloatingLayer () { /* This function makes all the calculations to apply phisycs on all visible floatingObjects in this layer. */ try { - for (let i = 0; i < invisibleFloatingObjects.length; i++) { - let floatingObject = invisibleFloatingObjects[i] - floatingObject.physics() - } + DEBUG.variable1 = 'Invisible Floating Objets: ' + invisibleFloatingObjects.length + DEBUG.variable2 = 'Visible Floating Objets: ' + visibleFloatingObjects.length for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[i] @@ -605,24 +618,6 @@ function newFloatingLayer () { } } - function changeTargetRepulsion (pDelta) { - try { - if (pDelta > 0) { - pDelta = 1 - } else { - pDelta = -1 - } - - maxTargetRepulsionForce = maxTargetRepulsionForce + pDelta / 1000 - - if (maxTargetRepulsionForce < 0.0000000001) { - maxTargetRepulsionForce = 0.0000000001 - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err= ' + err.stack) } - } - } - function colliding (floatingObject1, floatingObject2) { try { /* This function detects weather 2 floatingObjects collide with each other. */ diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6e9ce5833..cd4f32a8f 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -45,6 +45,7 @@ function newFloatingObject () { initializeRadius: initializeRadius, initializeImageSize: initializeImageSize, initializeFontSize: initializeFontSize, + initializeHierarchyRing: initializeHierarchyRing, initializeCurrentPosition: initializeCurrentPosition, radomizeCurrentSpeed: radomizeCurrentSpeed, drawBackground: drawBackground, @@ -107,6 +108,7 @@ function newFloatingObject () { function getContainer (point) { if ((thisObject.isCollapsed === true && thisObject.collapsedManually === false) || thisObject.isParentCollapsed === true) { return } + if (canvas.floatingSpace.inMapMode === true) { return } let container container = thisObject.payload.uiObject.getContainer(point) @@ -219,12 +221,13 @@ function newFloatingObject () { } function physics () { - collapsePhysics() frozenPhysics() /* From here on, only if they are not too far. */ if (canvas.floatingSpace.isItFar(thisObject.payload)) { return } thisObjectPhysics() - thisObject.payload.uiObject.physics() + if (thisObject.payload.uiObject !== undefined) { + thisObject.payload.uiObject.physics() + } positionContraintsPhysics() } @@ -241,18 +244,6 @@ function newFloatingObject () { } } - function collapsePhysics () { - let parent = thisObject.payload.chainParent - if (parent === undefined) { return } - if (parent.payload === undefined) { return } - if (parent.payload.floatingObject === undefined) { return } - - thisObject.isParentCollapsed = parent.payload.floatingObject.isCollapsed - if (thisObject.collapsedManually === false) { - thisObject.isCollapsed = parent.payload.floatingObject.isCollapsed - } - } - function positionContraintsPhysics () { if (thisObject.angleToParent !== ANGLE_TO_PARENT.NOT_FIXED && thisObject.isOnFocus !== true) { let parent = thisObject.payload.chainParent @@ -330,7 +321,7 @@ function newFloatingObject () { thisObject.payload.distance = distanceToParent - if (distanceToParent > 2000 || thisObject.isPinned === true) { return } // this is introduced to avoid edges cases when importing workspaces. + if (distanceToParent > 3000 || thisObject.isPinned === true) { return } // this is introduced to avoid edges cases when importing workspaces. newPosition = { x: parent.payload.position.x + distanceToParent * Math.cos(toRadians(thisObject.payload.angle)), @@ -348,11 +339,11 @@ function newFloatingObject () { function thisObjectPhysics () { // The radius also have a target. - if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 15) { + if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 10) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 15 + thisObject.container.frame.radius = thisObject.container.frame.radius + 10 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 15 + thisObject.container.frame.radius = thisObject.container.frame.radius - 10 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } @@ -377,6 +368,14 @@ function newFloatingObject () { } } + if (Math.abs(thisObject.currentHierarchyRing - thisObject.targetHierarchyRing) >= 10) { + if (thisObject.currentHierarchyRing < thisObject.targetHierarchyRing) { + thisObject.currentHierarchyRing = thisObject.currentHierarchyRing + 10 + } else { + thisObject.currentHierarchyRing = thisObject.currentHierarchyRing - 10 + } + } + /* Floating object position in screen coordinates */ thisObject.payload.position.x = thisObject.container.frame.position.x @@ -388,6 +387,7 @@ function newFloatingObject () { thisObject.targetRadius = thisObject.rawRadius * 6.0 thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 + thisObject.targetHierarchyRing = thisObject.rawHierarchyRing * 8.0 thisObject.payload.uiObject.container.eventHandler.raiseEvent('onFocus', point) @@ -420,6 +420,7 @@ function newFloatingObject () { thisObject.targetRadius = thisObject.rawRadius * 1 thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 + thisObject.targetHierarchyRing = thisObject.rawHierarchyRing * 1 thisObject.payload.uiObject.container.eventHandler.raiseEvent('onNotFocus') @@ -478,13 +479,13 @@ function newFloatingObject () { thisObject.rawRadius = radius thisObject.targetRadius = radius - thisObject.container.frame.radius = radius / 3 + thisObject.container.frame.radius = radius / 5 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } function initializeImageSize (suggestedValue) { - var size = suggestedValue + let size = suggestedValue if (size < 2) { size = 2 } @@ -495,7 +496,7 @@ function newFloatingObject () { } function initializeFontSize (suggestedValue) { - var size = suggestedValue + let size = suggestedValue if (size < 3) { size = 3 } @@ -505,6 +506,17 @@ function newFloatingObject () { thisObject.currentFontSize = size / 3 } + function initializeHierarchyRing (suggestedValue) { + let radius = suggestedValue + if (radius < 3) { + radius = 3 + } + + thisObject.rawHierarchyRing = radius + thisObject.targetHierarchyRing = radius + thisObject.currentHierarchyRing = radius + } + function initializeCurrentPosition (arroundPoint) { let position = {} diff --git a/FloatingSpace/FormulaEditor.js b/FloatingSpace/FormulaEditor.js index f2e805485..42f599b77 100644 --- a/FloatingSpace/FormulaEditor.js +++ b/FloatingSpace/FormulaEditor.js @@ -90,7 +90,7 @@ function newFormulaEditor () { 'box-shadow: none;' + 'overflow:hidden;' + 'font-family: ' + UI_FONT.PRIMARY + ';' + - 'font-size: 12px;' + + 'font-size: 14px;' + 'background-color: rgb(' + UI_COLOR.MANGANESE_PURPLE + ');' + 'color:rgb(255, 255, 255);' + 'width: ' + thisObject.container.frame.width + 'px;' + diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js index ee4510d2c..67c1d812f 100644 --- a/FloatingSpace/UiObject.js +++ b/FloatingSpace/UiObject.js @@ -25,6 +25,7 @@ function newUiObject () { shortcutKey: undefined, run: run, stop: stop, + heartBeat: heartBeat, getReadyToChainAttach: getReadyToChainAttach, showAvailabilityToChainAttach: showAvailabilityToChainAttach, getReadyToReferenceAttach: getReadyToReferenceAttach, @@ -32,6 +33,8 @@ function newUiObject () { highlight: highlight, setErrorMessage: setErrorMessage, setValue: setValue, + setPercentage: setPercentage, + setStatus: setStatus, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -54,7 +57,7 @@ function newUiObject () { let executingIcon let selfFocusEventSubscriptionId - let selfNotFocuskEventSubscriptionId + let selfNotFocusEventSubscriptionId let selfDisplaceEventSubscriptionId let selfDragStartedEventSubscriptionId let selfDragFinishedEventSubscriptionId @@ -68,6 +71,12 @@ function newUiObject () { let hasValue let valueCounter = 0 + let hasPercentage + let percentageCounter = 0 + + let hasStatus + let statusCounter = 0 + let previousDistanceToChainParent let readyToChainAttachDisplayCounter = 5 let readyToChainAttachDisplayIncrement = 0.1 @@ -92,20 +101,29 @@ function newUiObject () { let errorMessage = '' let currentValue = 0 + let currentPercentage = '' + let currentStatus = '' let rightDragging = false - let eventSubscriptionIdHeartbeat + let eventSubscriptionIdOnRunning let eventSubscriptionIdOnStopped + let lastHeartBeat + let onRunningCallBackFunction + let onRunningCallBackFunctionWasCalled = false + + let newUiObjectCounter = 25 + let referenceLineCounter = 0 + let chainLineCounter = 0 return thisObject function finalize () { let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id - systemEventHandler.stopListening(key, eventSubscriptionIdHeartbeat, 'UiObject') + systemEventHandler.stopListening(key, eventSubscriptionIdOnRunning, 'UiObject') systemEventHandler.stopListening(key, eventSubscriptionIdOnStopped, 'UiObject') thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) - thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfNotFocusEventSubscriptionId) thisObject.container.eventHandler.stopListening(selfDisplaceEventSubscriptionId) thisObject.container.eventHandler.stopListening(selfDragStartedEventSubscriptionId) thisObject.container.eventHandler.stopListening(selfDragFinishedEventSubscriptionId) @@ -143,6 +161,9 @@ function newUiObject () { icon = undefined chainAttachToNode = undefined referenceAttachToNode = undefined + lastHeartBeat = undefined + + onRunningCallBackFunction = undefined } function initialize (payload, menuItemsInitialValues) { @@ -166,7 +187,7 @@ function newUiObject () { iconPhysics() selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) - selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) + selfNotFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) selfDisplaceEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDisplace', onDisplace) selfDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted) selfDragFinishedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragFinished', onDragFinished) @@ -273,10 +294,83 @@ function newUiObject () { highlightPhisycs() errorMessagePhisycs() valuePhisycs() + percentagePhisycs() + statusPhisycs() chainDetachingPhysics() chainAttachingPhysics() referenceDetachingPhysics() referenceAttachingPhysics() + childrenRunningPhysics() + newObjectPhysics() + referenceLinePhysics() + chainLinePhysics() + } + + function referenceLinePhysics () { + referenceLineCounter = referenceLineCounter + 2 + if (referenceLineCounter > 500) { + referenceLineCounter = 0 + } + } + + function chainLinePhysics () { + chainLineCounter = chainLineCounter - 5 + if (chainLineCounter < 0) { + chainLineCounter = 500 + } + } + + function newObjectPhysics () { + newUiObjectCounter-- + if (newUiObjectCounter < 0) { + newUiObjectCounter = 0 + } + } + + function heartBeatPhysics () { + if (lastHeartBeat !== undefined) { + const ONE_MIN = 60000 + nowTimestamp = (new Date()).valueOf() + if (nowTimestamp - lastHeartBeat.valueOf() > ONE_MIN) { + lastHeartBeat = undefined + thisObject.isRunning = false + valueCounter = 0 + } + } else { + thisObject.isRunning = false + } + } + + function childrenRunningPhysics () { + let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type) + if (nodeDefinition.properties === undefined) { return } + let monitorChildrenRunning = false + for (let i = 0; i < nodeDefinition.properties.length; i++) { + let property = nodeDefinition.properties[i] + if (property.monitorChildrenRunning === true) { + let children = thisObject.payload.node[property.name] + if (children === undefined) { continue } + let totalRunning = 0 + for (let j = 0; j < children.length; j++) { + let child = children[j] + if (child.payload.uiObject.isRunning === true) { + totalRunning++ + } + } + if (totalRunning > 0) { + setValue(totalRunning + ' / ' + children.length + ' Running') + thisObject.isRunning = true + } else { + thisObject.isRunning = false + valueCounter = 0 + } + monitorChildrenRunning = true + return + } + } + if (monitorChildrenRunning === false) { + heartBeatPhysics() + } } function chainAttachingPhysics () { @@ -563,6 +657,22 @@ function newUiObject () { } } + function percentagePhisycs () { + percentageCounter-- + if (percentageCounter < 0) { + percentageCounter = 0 + hasPercentage = false + } + } + + function statusPhisycs () { + statusCounter-- + if (statusCounter < 0) { + statusCounter = 0 + hasStatus = false + } + } + function highlight () { isHighlighted = true highlightCounter = 30 @@ -577,11 +687,51 @@ function newUiObject () { } } - function setValue (value) { + function setValue (value, counter) { if (value !== undefined) { currentValue = value hasValue = true - valueCounter = 500 + if (counter !== undefined) { + valueCounter = counter + } else { + valueCounter = 100 + } + } + } + + function setPercentage (percentage, counter) { + if (percentage !== undefined) { + currentPercentage = percentage + hasPercentage = true + if (counter !== undefined) { + percentageCounter = counter + } else { + percentageCounter = 100 + } + } + } + + function setStatus (status, counter) { + if (status !== undefined) { + currentStatus = status + hasStatus = true + if (counter !== undefined) { + statusCounter = counter + } else { + statusCounter = 100 + } + } + } + + function heartBeat () { + lastHeartBeat = new Date() + thisObject.isRunning = true + + if (onRunningCallBackFunctionWasCalled === false) { + onRunningCallBackFunctionWasCalled = true + if (onRunningCallBackFunction !== undefined) { + onRunningCallBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + } } } @@ -598,19 +748,25 @@ function newUiObject () { /* We will wait to hear the first onHeartBeat in order to confirm the execution was really started */ let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id - systemEventHandler.listenToEvent(key, 'Heartbeat', undefined, 'UiObject', onResponse, onHeartBeat) + systemEventHandler.listenToEvent(key, 'Running', undefined, 'UiObject', onResponse, onRunning) + + onRunningCallBackFunction = callBackFunction function onResponse (message) { - eventSubscriptionIdHeartbeat = message.eventSubscriptionId + eventSubscriptionIdOnRunning = message.eventSubscriptionId } - function onHeartBeat () { + function onRunning () { if (thisObject.payload === undefined) { return } + let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id - systemEventHandler.stopListening(key, eventSubscriptionIdHeartbeat, 'UiObject') + systemEventHandler.stopListening(key, eventSubscriptionIdOnRunning, 'UiObject') + + thisObject.isRunning = true if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + onRunningCallBackFunctionWasCalled = true } } @@ -629,8 +785,6 @@ function newUiObject () { type: 'Secondary Action Already Executed' } stop(callBackFunction, event) - - thisObject.isRunning = true } function stop (callBackFunction, event) { @@ -653,6 +807,10 @@ function newUiObject () { thisObject.circularProgressBar = undefined } thisObject.isRunning = false + hasValue = false + hasPercentage = false + hasStatus = false + lastHeartBeat = undefined } } @@ -668,8 +826,10 @@ function newUiObject () { } if (nodeDefinition.alternativeIcons === 'Use Reference Grandparent') { if (thisObject.payload.node.payload.referenceParent !== undefined) { - if (thisObject.payload.node.payload.referenceParent.payload.referenceParent !== undefined) { - nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent + if (thisObject.payload.node.payload.referenceParent.payload !== undefined) { + if (thisObject.payload.node.payload.referenceParent.payload.referenceParent !== undefined) { + nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent + } } } } @@ -778,6 +938,8 @@ function newUiObject () { function drawMiddleground () { if (thisObject.isOnFocus === false) { drawValue() + drawPercentage() + drawStatus() drawText() thisObject.uiObjectTitle.draw() } @@ -856,6 +1018,8 @@ function newUiObject () { drawErrorMessage() drawValue() + drawPercentage() + drawStatus() drawText() if (drawTitle === true) { @@ -865,6 +1029,7 @@ function newUiObject () { } function drawChainLine () { + if (canvas.floatingSpace.drawChainLines === false) { return } if (thisObject.payload.chainParent === undefined) { return } let targetPoint = { @@ -880,6 +1045,11 @@ function newUiObject () { targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint) position = thisObject.container.frame.frameThisPoint(position) + if (canvas.floatingSpace.inMapMode === true) { + targetPoint = canvas.floatingSpace.transformPointToMap(targetPoint) + position = canvas.floatingSpace.transformPointToMap(position) + } + if (thisObject.container.frame.radius > 1) { let LINE_STYLE = UI_COLOR.TITANIUM_YELLOW if (thisObject.payload.floatingObject.angleToParent !== ANGLE_TO_PARENT.NOT_FIXED) { @@ -888,6 +1058,18 @@ function newUiObject () { if (thisObject.payload.floatingObject.isFrozen === true) { LINE_STYLE = UI_COLOR.TURQUOISE } + if (newUiObjectCounter > 0) { + LINE_STYLE = UI_COLOR.GREY + } + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(position.x, position.y) + browserCanvasContext.lineTo(targetPoint.x, targetPoint.y) + browserCanvasContext.strokeStyle = 'rgba(' + LINE_STYLE + ', 1)' + browserCanvasContext.setLineDash([0, chainLineCounter, 2, 3, 0, 500 - chainLineCounter]) + browserCanvasContext.lineWidth = 2 + browserCanvasContext.stroke() + browserCanvasContext.setLineDash([0, 0]) browserCanvasContext.beginPath() browserCanvasContext.moveTo(position.x, position.y) @@ -920,6 +1102,7 @@ function newUiObject () { } function drawReferenceLine () { + if (canvas.floatingSpace.drawReferenceLines === false) { return } if (thisObject.payload.referenceParent === undefined) { return } if (thisObject.payload.referenceParent.payload === undefined) { return } if (thisObject.payload.referenceParent.payload.floatingObject === undefined) { return } @@ -938,6 +1121,11 @@ function newUiObject () { targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint) position = thisObject.container.frame.frameThisPoint(position) + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + targetPoint = canvas.floatingSpace.transformPointToMap(targetPoint) + } + let LINE_STYLE = UI_COLOR.GREY if (thisObject.container.frame.radius > 1) { @@ -954,7 +1142,7 @@ function newUiObject () { browserCanvasContext.moveTo(position.x, position.y) browserCanvasContext.lineTo(targetPoint.x, targetPoint.y) browserCanvasContext.strokeStyle = 'rgba(' + LINE_STYLE + ', 1)' - browserCanvasContext.setLineDash([1, 9, 2, 8, 3, 7, 4, 6, 0, 500]) + browserCanvasContext.setLineDash([0, referenceLineCounter, 1, 9, 2, 8, 3, 7, 4, 6, 0, 500 - referenceLineCounter]) browserCanvasContext.lineWidth = 4 browserCanvasContext.stroke() browserCanvasContext.setLineDash([0, 0]) @@ -980,6 +1168,10 @@ function newUiObject () { position = thisObject.container.frame.frameThisPoint(position) + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + } + let radius = thisObject.container.frame.radius /* Label Text */ let labelPoint @@ -1002,6 +1194,16 @@ function newUiObject () { y: position.y + radius * 4 / 5 + fontSize * FONT_ASPECT_RATIO + 15 } + if (canvas.floatingSpace.inMapMode === true) { + labelPoint.y = labelPoint.y - 20 + let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type) + if (nodeDefinition !== undefined) { + if (nodeDefinition.isHierarchyHead !== true) { + return + } + } + } + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -1020,6 +1222,10 @@ function newUiObject () { position = thisObject.container.frame.frameThisPoint(position) + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + } + let radius = thisObject.container.frame.radius * 3.5 /* Label Text */ let labelPoint @@ -1050,6 +1256,8 @@ function newUiObject () { function drawValue () { if (hasValue === false) { return } + if (canvas.floatingSpace.inMapMode === true) { return } + // if (currentValue === undefined || currentValue === '') { return } /* Text Follows */ let position = { @@ -1059,7 +1267,11 @@ function newUiObject () { position = thisObject.container.frame.frameThisPoint(position) - let radius = thisObject.container.frame.radius * 1.5 + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + } + + let radius = thisObject.container.frame.radius * 1.35 /* Label Text */ let labelPoint let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 @@ -1075,6 +1287,53 @@ function newUiObject () { } } + if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + + if (label.length > 30) { + fontSize = fontSize / 2 + } + + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, + y: position.y + radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', 1)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } + + function drawPercentage () { + if (hasPercentage === false) { return } + if (canvas.floatingSpace.inMapMode === true) { return } + + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + } + + let radius = thisObject.container.frame.radius * 1.75 + /* Label Text */ + let labelPoint + let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 + let label + + if (radius > 6) { + const MAX_LABEL_LENGTH = 65 + + label = Number(currentPercentage).toFixed(0) + '%' + if (label !== undefined) { if (label.length > MAX_LABEL_LENGTH) { label = label.substring(0, MAX_LABEL_LENGTH) + '...' @@ -1092,6 +1351,49 @@ function newUiObject () { } } + function drawStatus () { + if (hasStatus === false) { return } + if (canvas.floatingSpace.inMapMode === true) { return } + + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + } + + let radius = thisObject.container.frame.radius * 1.4 + /* Label Text */ + let labelPoint + let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 / 2 + let label + + if (radius > 6) { + const MAX_LABEL_LENGTH = 65 + + label = currentStatus + + if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, + y: position.y - radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } + function addIndexNumber (label) { switch (thisObject.payload.node.type) { case 'Phase': { @@ -1162,6 +1464,10 @@ function newUiObject () { position = thisObject.container.frame.frameThisPoint(position) + if (canvas.floatingSpace.inMapMode === true) { + position = canvas.floatingSpace.transformPointToMap(position) + } + let radius = thisObject.container.frame.radius if (radius > 0.5) { @@ -1173,7 +1479,14 @@ function newUiObject () { } visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition) - visiblePosition = thisObject.fitFunction(visiblePosition) + + if (canvas.floatingSpace.inMapMode === true) { + visiblePosition = canvas.floatingSpace.transformPointToMap(visiblePosition) + radius = canvas.floatingSpace.transformRadiusToMap(radius) + VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS) + } else { + visiblePosition = thisObject.fitFunction(visiblePosition) + } browserCanvasContext.beginPath() browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true) @@ -1194,7 +1507,10 @@ function newUiObject () { let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type) if (nodeDefinition !== undefined) { if (nodeDefinition.isHierarchyHead === true) { - VISIBLE_RADIUS = thisObject.container.frame.radius * 2 + VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 2.8 + if (canvas.floatingSpace.inMapMode === true) { + VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS) + } let OPACITY = 1 browserCanvasContext.beginPath() @@ -1364,7 +1680,15 @@ function newUiObject () { let additionalImageSize = 0 if (thisObject.isExecuting === true || isReadyToReferenceAttach === true || isReadyToChainAttach === true) { additionalImageSize = 20 } let totalImageSize = additionalImageSize + thisObject.payload.floatingObject.currentImageSize - + if (canvas.floatingSpace.inMapMode === true) { + totalImageSize = canvas.floatingSpace.transformImagesizeToMap(totalImageSize) + let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type) + if (nodeDefinition !== undefined) { + if (nodeDefinition.isHierarchyHead !== true) { + totalImageSize = totalImageSize / 4 + } + } + } browserCanvasContext.drawImage( icon, position.x - totalImageSize / 2, position.y - totalImageSize / 2, @@ -1389,3 +1713,4 @@ function newUiObject () { } } } + diff --git a/FloatingSpace/UiObjectConstructor.js b/FloatingSpace/UiObjectConstructor.js index ac5ee4dd3..4fe03a6bd 100644 --- a/FloatingSpace/UiObjectConstructor.js +++ b/FloatingSpace/UiObjectConstructor.js @@ -84,7 +84,7 @@ function newUiObjectConstructor () { for (let j = 0; j < menuItems.length; j++) { let item = menuItems[j] item.angle = undefined - if (item.action.indexOf('Add ') >= 0 && item.action.indexOf('Missing') >= 0) { + if (item.action.indexOf('Add Missing Children') >= 0) { item.action = 'Add Missing Children' } if (item.action.indexOf('Delete ') >= 0) { @@ -134,7 +134,7 @@ function newUiObjectConstructor () { visible: true, iconPathOn: 'menu-fix-pinned', iconPathOff: 'menu-fix-unpinned', - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 1 @@ -149,7 +149,7 @@ function newUiObjectConstructor () { label: undefined, visible: true, icons: ['angle-to-parent-000', 'angle-to-parent-360', 'angle-to-parent-180', 'angle-to-parent-090', 'angle-to-parent-045'], - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 1 @@ -164,7 +164,7 @@ function newUiObjectConstructor () { label: undefined, visible: true, icons: ['distance-to-parent-000', 'distance-to-parent-025', 'distance-to-parent-050', 'distance-to-parent-100', 'distance-to-parent-150', 'distance-to-parent-200'], - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 1 @@ -180,7 +180,7 @@ function newUiObjectConstructor () { visible: true, iconPathOn: 'menu-mobility-unfreeze', iconPathOff: 'menu-mobility-freeze', - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 1 @@ -196,7 +196,7 @@ function newUiObjectConstructor () { visible: true, iconPathOn: 'menu-tree-plus', iconPathOff: 'menu-tree-minus', - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 1 @@ -210,7 +210,7 @@ function newUiObjectConstructor () { visible: true, iconPathOn: 'menu-backup', iconPathOff: 'menu-backup', - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 2 @@ -224,7 +224,7 @@ function newUiObjectConstructor () { visible: true, iconPathOn: 'clone', iconPathOff: 'clone', - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 2 @@ -239,13 +239,56 @@ function newUiObjectConstructor () { visible: true, iconPathOn: 'menu-share', iconPathOff: 'menu-share', - rawRadius: 8, + rawRadius: 12, targetRadius: 0, currentRadius: 0, ring: 2 } ) } + menuItemsInitialValues.push( + { + action: 'Remove Parent', + actionFunction: floatingObject.payload.onMenuItemClick, + label: undefined, + visible: true, + iconPathOn: 'detach', + iconPathOff: 'detach', + rawRadius: 12, + targetRadius: 0, + currentRadius: 0, + ring: 3 + } + ) + menuItemsInitialValues.push( + { + action: 'Remove Reference', + actionFunction: floatingObject.payload.onMenuItemClick, + label: undefined, + visible: true, + iconPathOn: 'delink', + iconPathOff: 'delink', + rawRadius: 12, + targetRadius: 0, + currentRadius: 0, + ring: 3 + } + ) + + menuItemsInitialValues.push( + { + action: 'Open Documentation', + actionFunction: floatingObject.payload.onMenuItemClick, + label: undefined, + visible: true, + iconPathOn: 'help', + iconPathOff: 'help', + rawRadius: 12, + targetRadius: 0, + currentRadius: 0, + ring: 4 + } + ) } function getMenuItemsInitialValues (uiObject, floatingObject, payload) { @@ -304,7 +347,7 @@ function newUiObjectConstructor () { } if (newMenuItem.rawRadius === undefined) { - newMenuItem.rawRadius = 8 + newMenuItem.rawRadius = 12 } if (newMenuItem.targetRadius === undefined) { @@ -327,7 +370,10 @@ function newUiObjectConstructor () { function setFloatingObjectBasicProperties (floatingObject, payload) { const FRICTION = 0.95 const INITIAL_FRICTION = 0.97 - const INITIAL_FONT_SIZE = 12 + const INITIAL_FONT_SIZE = 12 * 1.5 + const INITIAL_RADIOUS = 45 * 1.5 + const INITIAL_IMAGE_SIZE = 80 * 1.2 + const INITIAL_HIERARCHY_RING = 20 switch (payload.node.type) { case 'Workspace': { @@ -374,8 +420,9 @@ function newUiObjectConstructor () { floatingObject.friction = INITIAL_FRICTION floatingObject.initializeMass(500) - floatingObject.initializeRadius(45) - floatingObject.initializeImageSize(80) + floatingObject.initializeRadius(INITIAL_RADIOUS) + floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING) + floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE) floatingObject.initializeFontSize(INITIAL_FONT_SIZE) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' @@ -385,8 +432,9 @@ function newUiObjectConstructor () { floatingObject.friction = INITIAL_FRICTION floatingObject.initializeMass(600) - floatingObject.initializeRadius(45) - floatingObject.initializeImageSize(80) + floatingObject.initializeRadius(INITIAL_RADIOUS) + floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING) + floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE) floatingObject.initializeFontSize(INITIAL_FONT_SIZE) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' @@ -400,8 +448,9 @@ function newUiObjectConstructor () { floatingObject.friction = INITIAL_FRICTION floatingObject.initializeMass(300) - floatingObject.initializeRadius(40) - floatingObject.initializeImageSize(70) + floatingObject.initializeRadius(INITIAL_RADIOUS - 5) + floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING) + floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 10) floatingObject.initializeFontSize(INITIAL_FONT_SIZE) floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' @@ -415,8 +464,9 @@ function newUiObjectConstructor () { floatingObject.friction = INITIAL_FRICTION floatingObject.initializeMass(150) - floatingObject.initializeRadius(35) - floatingObject.initializeImageSize(60) + floatingObject.initializeRadius(INITIAL_RADIOUS - 10) + floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING) + floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 20) floatingObject.initializeFontSize(INITIAL_FONT_SIZE) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' @@ -430,8 +480,9 @@ function newUiObjectConstructor () { floatingObject.friction = INITIAL_FRICTION floatingObject.initializeMass(75) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) + floatingObject.initializeRadius(INITIAL_RADIOUS - 15) + floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING) + floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 30) floatingObject.initializeFontSize(INITIAL_FONT_SIZE) floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' @@ -445,8 +496,9 @@ function newUiObjectConstructor () { floatingObject.friction = INITIAL_FRICTION floatingObject.initializeMass(50) - floatingObject.initializeRadius(25) - floatingObject.initializeImageSize(40) + floatingObject.initializeRadius(INITIAL_RADIOUS - 20) + floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING) + floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 40) floatingObject.initializeFontSize(INITIAL_FONT_SIZE) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' @@ -456,8 +508,9 @@ function newUiObjectConstructor () { floatingObject.friction = INITIAL_FRICTION floatingObject.initializeMass(25) - floatingObject.initializeRadius(20) - floatingObject.initializeImageSize(30) + floatingObject.initializeRadius(INITIAL_RADIOUS - 25) + floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING) + floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 50) floatingObject.initializeFontSize(INITIAL_FONT_SIZE) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' @@ -467,6 +520,7 @@ function newUiObjectConstructor () { } function destroyUiObject (payload) { + if (payload === undefined) { return } floatingLayer.removeFloatingObject(payload.floatingObject.handle) payload.floatingObject.finalize() diff --git a/FloatingSpace/UiObjectTitle.js b/FloatingSpace/UiObjectTitle.js index efb8a1da2..cb723a0b0 100644 --- a/FloatingSpace/UiObjectTitle.js +++ b/FloatingSpace/UiObjectTitle.js @@ -136,11 +136,38 @@ function newUiObjectTitle () { } break } + case 'Use Reference Parent Parent Parent': { + let nodeToUse = thisObject.payload.node.payload.referenceParent + if (nodeToUse !== undefined && nodeToUse.payload !== undefined) { + nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode + if (nodeToUse !== undefined && nodeToUse.payload !== undefined) { + nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode + if (nodeToUse !== undefined && nodeToUse.payload !== undefined) { + thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title + thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name + } + } + } + break + } + default: { + if (titleReference.indexOf('Use Child @') === 0) { + let propertyName = titleReference.substring(titleReference.indexOf('@') + 1, titleReference.length) + let childNode = thisObject.payload.node[propertyName] + thisObject.payload.title = thisObject.payload.title + separator + childNode.name + thisObject.payload.node.name = thisObject.payload.node.name + separator + childNode.name + } + } } separator = ' ' } } + /* The name becomes the title. */ + if (thisObject.payload.node.name !== undefined) { + thisObject.payload.title = thisObject.payload.node.name + } + let title = trimTitle(thisObject.payload.title) /* Here we set the dimensions and position of this object */ @@ -202,6 +229,8 @@ function newUiObjectTitle () { thisObject.payload.node.name = input.value } } + let inputDiv = document.getElementById('inputDiv') + inputDiv.style = 'position:absolute; top:' + '-100' + 'px; left:' + '-100' + 'px; z-index:1; ' } function enterEditMode () { @@ -279,6 +308,19 @@ function newUiObjectTitle () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + if (canvas.floatingSpace.inMapMode === true) { + labelPoint = canvas.floatingSpace.transformPointToMap(labelPoint) + labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO + labelPoint.y = labelPoint.y - 35 + + let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type) + if (nodeDefinition !== undefined) { + if (nodeDefinition.isHierarchyHead !== true) { + return + } + } + } + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -296,3 +338,4 @@ function newUiObjectTitle () { return title } } + diff --git a/Frame.js b/Frame.js index 3f8bb1590..ea2b7ab12 100644 --- a/Frame.js +++ b/Frame.js @@ -21,6 +21,7 @@ function newFrame () { isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. isThisScreenPointHere: isThisScreenPointHere, isInViewPort: isInViewPort, + isCenterInViewPort: isCenterInViewPort, initialize: initialize, finalize: finalize } @@ -76,6 +77,31 @@ function newFrame () { } } + function isCenterInViewPort () { + /* 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: thisObject.width * 40 / 100, + y: thisObject.height * 40 / 100 + } + + point3 = { + x: thisObject.width * 40 / 100, + y: thisObject.height * 40 / 100 + } + + /* Now the transformations. */ + + point1 = transformThisPoint(point1, thisObject.container) + point3 = transformThisPoint(point3, thisObject.container) + + 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 + } + } + function frameThisPoint (point) { /* We need not to modify the point received, so me make a copy of it. */ @@ -183,7 +209,7 @@ function newFrame () { } /* Now we check if the resulting point is whin the current Frame. */ - + if (isNaN(checkPoint.x) || isNaN(checkPoint.y)) { return false } if (thisObject.type === 'Circle') { let distance = Math.sqrt(Math.pow(thisObject.position.x - point.x, 2) + Math.pow(thisObject.position.y - point.y, 2)) diff --git a/Globals.js b/Globals.js index 24454d260..dfe29698b 100644 --- a/Globals.js +++ b/Globals.js @@ -3,20 +3,7 @@ const CANVAS_APP_NAME = 'Canvas App' -const SUPPORTED_EXCHANGES = ["Poloniex"]; -const SUPPORTED_MARKETS = [ - { - baseAsset: "USDT", - quotedAsset: "BTC", - } -]; -const DEFAULT_EXCHANGE = "Poloniex"; -const DEFAULT_MARKET = { - baseAsset: "USDT", - quotedAsset: "BTC", -}; - -UI_COLOR = { +const UI_COLOR = { DARK: "48, 48, 54", LIGHT: "234, 226, 222", GREY: "150, 150, 150", @@ -36,15 +23,26 @@ UI_COLOR = { /* User Interface Fonts */ -UI_FONT = { +const UI_FONT = { PRIMARY: "Saira Condensed", SECONDARY: "Source Code Pro" }; +const MAC_AMOUNT_FACTOR = 5 +const IS_MAC = navigator.platform.toUpperCase().indexOf('MAC') >= 0 + +const DOUBLE_CLICK_ZOOM_OUT_LEVEL = 0 +const DOUBLE_CLICK_ZOOM_IN_LEVEL = 6 +const DOUBLE_CLICK_ZOOM_IN_IN_LEVEL = 7 + const DEBUG = {} -const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 5 // This regulates some behavious changes that happens when the user zoom out below this level. -const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 5 // This help regulate when to change the Time Frame base on the level of zoom out. -const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 5 +const ZOOM_OUT_THRESHOLD_FOR_NOT_HIDDING_PANELS = 12 +const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 7 +const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 3 // 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 = 2 +const ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION = 3 +const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED = 5 +const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES = 3 let FONT_ASPECT_RATIO = 0.32; @@ -75,7 +73,7 @@ const DISTANCE_TO_PARENT = { /* User Interface Panels */ -UI_PANEL = { +const UI_PANEL = { WIDTH: { SMALL: 100, NORMAL: 150, @@ -121,7 +119,7 @@ let dailyFilePeriods = dailyFilePeriods = JSON.parse(dailyFilePeriods); -SHOW_ANIMATION_PERFORMACE = false; +let SHOW_ANIMATION_PERFORMACE = false; let testUser = window.localStorage.getItem("test_user") let LOGGED_IN_USER_LOCAL_STORAGE_KEY @@ -135,10 +133,6 @@ if (testUser !== null) { LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY = "access_token" } -const DEFAULT_CONFIG_TEXT = '// Write your config here' -const DEFAULT_FORMULA_TEXT = '// Write your formula here' -const DEFAULT_CODE_TEXT = '// Write your code here' - const MAX_DEFAULT_RATE_SCALE_VALUE = 35000; // This is needed to know the scale of the market time line. const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5; @@ -165,6 +159,8 @@ 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.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.chartingSpace.viewport.initialize if the user had a prevous session with this same browser. @@ -210,8 +206,8 @@ const PERIOD_01_MIN = "01-min"; 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 = 320; -const TIME_MACHINE_HEIGHT = 120; +const TIME_MACHINE_WIDTH = 8; +const TIME_MACHINE_HEIGHT = 8; let mediaRecorder // to downloadText canvas animation as a mediaRecorder let areWeRecording = false diff --git a/Panels/Layer.js b/Panels/Layer.js index f17574b6c..5958076f0 100644 --- a/Panels/Layer.js +++ b/Panels/Layer.js @@ -11,6 +11,16 @@ function newLayer () { payload: undefined, definition: undefined, panels: undefined, + baseAsset: undefined, + quotedAsset: undefined, + market: undefined, + exchange: undefined, + plotterModule: undefined, + exchangeIcon: undefined, + plotterTypeIcon: undefined, + baseAssetIcon: undefined, + quotedAssetIcon: undefined, + checkStatusAtShutDown: checkStatusAtShutDown, physics: physics, draw: draw, turnOff: turnOff, @@ -79,6 +89,8 @@ function newLayer () { return thisObject function finalize () { + thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId) + thisObject.container.finalize() thisObject.eventHandler.finalize() thisObject.container = undefined @@ -107,7 +119,15 @@ function newLayer () { panelsVisibleButton = undefined - thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId) + thisObject.baseAsset = undefined + thisObject.quotedAsset = undefined + thisObject.market = undefined + thisObject.exchange = undefined + thisObject.plotterModule = undefined + thisObject.exchangeIcon = undefined + thisObject.plotterTypeIcon = undefined + thisObject.baseAssetIcon = undefined + thisObject.quotedAssetIcon = undefined } function initialize (callBackFunction) { @@ -170,12 +190,58 @@ function newLayer () { /* Lets listen to our own events to react when we have a Mouse Click */ onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + /* Get ready to draw this layer */ + thisObject.baseAsset = thisObject.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent + thisObject.quotedAsset = thisObject.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent + thisObject.market = thisObject.baseAsset.code.codeName + '/' + thisObject.quotedAsset.code.codeName + thisObject.exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode + thisObject.plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent + + thisObject.exchangeIcon = getIcon(thisObject.exchange) + + if (thisObject.plotterModule.code.icon !== undefined) { + thisObject.plotterTypeIcon = canvas.designSpace.iconCollection.get(thisObject.plotterModule.code.icon) + } + + thisObject.baseAssetIcon = getIcon(thisObject.baseAsset) + thisObject.quotedAssetIcon = getIcon(thisObject.quotedAsset) + + function getIcon (node) { + let nodeDefinition = APP_SCHEMA_MAP.get(node.type) + let iconName + if (nodeDefinition.alternativeIcons !== undefined) { + for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) { + alternativeIcon = nodeDefinition.alternativeIcons[i] + if (alternativeIcon.codeName === node.code.codeName) { + iconName = alternativeIcon.iconName + } + } + } + if (iconName !== undefined) { + icon = canvas.designSpace.iconCollection.get(iconName) + } else { + icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon) + } + return icon + } + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } } } + function checkStatusAtShutDown () { + /* Mechanism to recover a layer that was left loading the last time the browser was shut dowm. */ + let storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'status') + if (storedValue !== undefined) { + if (storedValue === LAYER_STATUS.LOADING) { + resetProgressBars() + changeStatusTo(LAYER_STATUS.LOADING) + } + } + } + function getContainer (point) { if (panelsVisibleButton !== undefined) { let container = panelsVisibleButton.getContainer(point) @@ -454,49 +520,14 @@ function newLayer () { } function drawLayerDisplay () { - let baseAsset = thisObject.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent - let quotedAsset = thisObject.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent - let market = baseAsset.code.codeName + '/' + quotedAsset.code.codeName - let exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode - let plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent - let label1 = thisObject.payload.node.name - let label2 = exchange.name.substring(0, 15) + ' - ' + market + let label2 = thisObject.exchange.name.substring(0, 15) + ' - ' + thisObject.market let label3 = thisObject.status.toUpperCase() if (label1 !== undefined) { label1 = label1.substring(0, 22) } - let icon1 = getIcon(exchange) - - let icon2 - if (plotterModule.code.icon !== undefined) { - icon2 = canvas.designSpace.iconCollection.get(plotterModule.code.icon) - } - - let icon3 = getIcon(baseAsset) - let icon4 = getIcon(quotedAsset) - - function getIcon (node) { - let nodeDefinition = APP_SCHEMA_MAP.get(node.type) - let iconName - if (nodeDefinition.alternativeIcons !== undefined) { - for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) { - alternativeIcon = nodeDefinition.alternativeIcons[i] - if (alternativeIcon.codeName === node.code.codeName) { - iconName = alternativeIcon.iconName - } - } - } - if (iconName !== undefined) { - icon = canvas.designSpace.iconCollection.get(iconName) - } else { - icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon) - } - return icon - } - let backgroundColor = UI_COLOR.BLACK const RED_LINE_HIGHT = 4 @@ -523,9 +554,9 @@ function newLayer () { drawProgressBar(singleFileProgressBar, 1, -47) drawProgressBar(fileSequenceProgressBar, 1, -48) - drawIcon(icon1, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container) - drawIcon(icon2, 7 / 8, 2 / 10, 0, 0, 14, thisObject.container) - drawIcon(icon3, 3.4 / 8, 2 / 10, 0, 0, 14, thisObject.container) - drawIcon(icon4, 4.6 / 8, 2 / 10, 0, 0, 14, thisObject.container) + drawIcon(thisObject.exchangeIcon, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container) + drawIcon(thisObject.plotterTypeIcon, 7 / 8, 2 / 10, 0, 0, 14, thisObject.container) + drawIcon(thisObject.baseAssetIcon, 3.4 / 8, 2 / 10, 0, 0, 14, thisObject.container) + drawIcon(thisObject.quotedAssetIcon, 4.6 / 8, 2 / 10, 0, 0, 14, thisObject.container) } } diff --git a/Panels/LayersPanel.js b/Panels/LayersPanel.js index 9381a844b..b5bed93e9 100644 --- a/Panels/LayersPanel.js +++ b/Panels/LayersPanel.js @@ -6,7 +6,8 @@ function newLayersPanel () { layers: [], payload: undefined, isVisible: true, - panelTabButton: undefined, + upDownButton: undefined, + leftRightButton: undefined, physics: physics, draw: draw, getContainer: getContainer, @@ -18,8 +19,10 @@ function newLayersPanel () { thisObject.container.initialize() thisObject.container.isDraggeable = true thisObject.container.isWheelable = true + thisObject.container.detectMouseOver = true let isInitialized = false + let mouseOverCounter = 0 let layersMap = new Map() let visibleLayers = [] @@ -36,13 +39,23 @@ function newLayersPanel () { let posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight let onMouseWheelEventSuscriptionId + let onMouseOverEventSubscriptionId + let onMouseNotOverEventSubscriptionId + + let isMouseOver return thisObject function finalize () { thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId) + thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) + + thisObject.upDownButton.finalize() + thisObject.upDownButton = undefined + + thisObject.leftRightButton.finalize() + thisObject.leftRightButton = undefined - thisObject.panelTabButton.finalize() - thisObject.panelTabButton = undefined layersMap = undefined visibleLayers = undefined @@ -67,25 +80,45 @@ function newLayersPanel () { thisObject.container.frame.position = position loadFrame(thisObject.payload, thisObject.container.frame) - thisObject.panelTabButton = newPanelTabButton() - thisObject.panelTabButton.parentContainer = thisObject.container - thisObject.panelTabButton.container.frame.parentFrame = thisObject.container.frame - thisObject.panelTabButton.fitFunction = thisObject.fitFunction - thisObject.panelTabButton.initialize() + thisObject.upDownButton = newUpDownButton() + thisObject.upDownButton.parentContainer = thisObject.container + thisObject.upDownButton.container.frame.parentFrame = thisObject.container.frame + thisObject.upDownButton.fitFunction = thisObject.fitFunction + thisObject.upDownButton.initialize() + + thisObject.leftRightButton = newLeftRightButton() + thisObject.leftRightButton.parentContainer = thisObject.container + thisObject.leftRightButton.container.frame.parentFrame = thisObject.container.frame + thisObject.leftRightButton.fitFunction = thisObject.fitFunction + thisObject.leftRightButton.initialize() onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) readObjectState() isInitialized = true } + function onMouseOver (event) { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false + } + function saveObjectStateVisibleLayers () { savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers) } function saveObjectStatePanelLocation () { - savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', thisObject.panelTabButton.status) + let panelLocation = { + upOrDown: thisObject.upDownButton.status, + leftOrRight: thisObject.leftRightButton.status + } + savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', panelLocation) } function readObjectState () { @@ -117,11 +150,16 @@ function newLayersPanel () { saveObjectStatePanelLocation() // this overrides any invalid value at the config. return } else { - if (storedValue !== 'up' && storedValue !== 'down') { + if (storedValue.upOrDown !== 'up' && storedValue.upOrDown !== 'down') { saveObjectStatePanelLocation() // this overrides any invalid value at the config. return } - thisObject.panelTabButton.setStatus(storedValue) + if (storedValue.leftOrRight !== 'left' && storedValue.leftOrRight !== 'right') { + saveObjectStatePanelLocation() // this overrides any invalid value at the config. + return + } + thisObject.upDownButton.setStatus(storedValue.upOrDown) + thisObject.leftRightButton.setStatus(storedValue.leftOrRight) saveObjectStatePanelLocation() } } @@ -161,7 +199,9 @@ function newLayersPanel () { layer.onLayerStatusChangedEventSuscriptionId = layer.container.eventHandler.listenToEvent('Status Changed', onLayerStatusChanged) layer.onMouseWheelEventSuscriptionId = layer.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) - return layer + layer.checkStatusAtShutDown() + + return } } } @@ -239,12 +279,17 @@ function newLayersPanel () { thisObject.container.eventHandler.raiseEvent('Layer Status Changed', layer) } - function getContainer (point) { + function getContainer (point, purpose) { if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return } let container - container = thisObject.panelTabButton.getContainer(point) - if (container !== undefined) { return container } + if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) { + container = thisObject.upDownButton.getContainer(point) + if (container !== undefined) { return container } + + container = thisObject.leftRightButton.getContainer(point) + if (container !== undefined) { return container } + } /* First we check if thisObject point is inside thisObject space. */ if (thisObject.container.frame.isThisPointHere(point, true) === true) { @@ -261,7 +306,9 @@ function newLayersPanel () { checkPoint = thisObject.fitFunction(checkPoint) if (point.x === checkPoint.x && point.y === checkPoint.y) { - return container + if (purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) { + return container + } } } } @@ -293,7 +340,10 @@ function newLayersPanel () { function physics () { if (isInitialized === false) { return } - thisObject.panelTabButton.physics() + if (thisObject.payload.node === undefined) { return } + + thisObject.upDownButton.physics() + thisObject.leftRightButton.physics() saveFrame(thisObject.payload, thisObject.container.frame) syncWithConfigPhysics() @@ -321,6 +371,7 @@ function newLayersPanel () { calculateVisbleLayers() function syncWithDesignerLayers () { + if (thisObject.payload.node === undefined) { return } let layerManager = thisObject.payload.node for (let p = 0; p < layerManager.layers.length; p++) { let layerNode = layerManager.layers[p] @@ -378,10 +429,18 @@ function newLayersPanel () { visibleLayers[i].draw() } drawScrollBar() - thisObject.panelTabButton.draw() + if (isMouseOver === true) { + thisObject.upDownButton.draw() + thisObject.leftRightButton.draw() + } } function drawHeader () { + if (thisObject.payload === undefined) { return } + if (thisObject.payload.node === undefined) { return } + if (thisObject.payload.node.payload.parentNode === undefined) { return } + if (thisObject.payload.node.payload.parentNode.payload.parentNode === undefined) { return } + let label1 = thisObject.payload.node.payload.parentNode.payload.parentNode.name.substring(0, 18) let label2 = thisObject.payload.node.payload.parentNode.name.substring(0, 18) let label3 = '' diff --git a/Panels/LeftRightButton.js b/Panels/LeftRightButton.js new file mode 100644 index 000000000..cac7c7345 --- /dev/null +++ b/Panels/LeftRightButton.js @@ -0,0 +1,244 @@ +function newLeftRightButton () { + let thisObject = { + container: undefined, + fitFunction: undefined, + parentContainer: undefined, + status: undefined, + setStatus: setStatus, + physics: physics, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize, + finalize: finalize + } + + let isInitialized = false + /* Cointainer stuff */ + + thisObject.container = newContainer() + thisObject.container.name = 'Left Right Button' + thisObject.container.initialize() + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.containerName = 'Left Right Button' + + thisObject.status = 'left' + let leftPosition = {} + let rightPosition = {} + let transitionPosition = {} + + let onMouseClickEventSuscriptionId + return thisObject + + function finalize () { + thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId) + thisObject.container.finalize() + thisObject.container = undefined + thisObject.fitFunction = undefined + thisObject.parentContainer = undefined + + thisObject.status = undefined + leftPosition = undefined + rightPosition = undefined + transitionPosition = undefined + } + + function initialize () { + thisObject.container.frame.width = 12 + thisObject.container.frame.height = 12 + + let position = { + x: thisObject.container.frame.parentFrame.width * 2.25 / 8 - thisObject.container.frame.width / 2, + y: 40 * 4 / 8 - thisObject.container.frame.height / 2 + } + + thisObject.container.frame.position = position + + leftPosition.x = thisObject.parentContainer.frame.position.x + leftPosition.y = thisObject.parentContainer.frame.position.y + + rightPosition.x = thisObject.parentContainer.frame.position.x + rightPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y + + transitionPosition.x = leftPosition.x + transitionPosition.y = leftPosition.y + + /* Lets listen to our own events to react when we have a Mouse Click */ + onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + + isInitialized = true + } + + function setStatus (value) { + if (value === 'left' && thisObject.status === 'right') { + thisObject.status = 'going left' + } + if (value === 'right' && thisObject.status === 'left') { + thisObject.status = 'going right' + } + } + + function onMouseClick (event) { + if (thisObject.status === 'left') { + transitionPosition.x = leftPosition.x + transitionPosition.y = leftPosition.y + + thisObject.status = 'going right' + } else { + transitionPosition.x = rightPosition.x + transitionPosition.y = rightPosition.y + + thisObject.status = 'going left' + } + } + + function physics () { + if (isInitialized === false) { return } + + leftPosition.x = canvas.chartingSpace.viewport.visibleArea.topLeft.x + leftPosition.y = thisObject.parentContainer.frame.position.y + + rightPosition.x = canvas.chartingSpace.viewport.visibleArea.bottomRight.x + rightPosition.y = thisObject.parentContainer.frame.position.y + + if (thisObject.status === 'going right') { + if (transitionPosition.x < rightPosition.x) { + transitionPosition.x = transitionPosition.x + 50 + thisObject.parentContainer.frame.position.x = transitionPosition.x + } else { + thisObject.parentContainer.frame.position.x = rightPosition.x + thisObject.status = 'right' + } + } + if (thisObject.status === 'going left') { + if (transitionPosition.x > leftPosition.x) { + transitionPosition.x = transitionPosition.x - 50 + thisObject.parentContainer.frame.position.x = transitionPosition.x + } else { + thisObject.parentContainer.frame.position.x = leftPosition.x + thisObject.status = 'left' + } + } + } + + function draw () { + if (isInitialized === false) { return } + + drawButton() + } + + function getContainer (point, purpose) { + let container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } + } + + function drawButton () { + let point1 + let point2 + let point3 + + switch (thisObject.status) { + case 'left': { + point1 = { + x: 3, + y: 3 + } + + point2 = { + x: 3, + y: thisObject.container.frame.height - 3 + } + + point3 = { + x: thisObject.container.frame.width - 3, + y: thisObject.container.frame.height / 2 + } + break + } + + case 'going right': { + point1 = { + x: 4, + y: 4 + } + + point2 = { + x: 4, + y: thisObject.container.frame.height - 4 + } + + point3 = { + x: thisObject.container.frame.width - 4, + y: thisObject.container.frame.height / 2 + } + break + } + + case 'going left': { + point1 = { + x: thisObject.container.frame.width - 4, + y: 4 + } + + point2 = { + x: thisObject.container.frame.width - 4, + y: thisObject.container.frame.height - 4 + } + + point3 = { + x: 4, + y: thisObject.container.frame.height / 2 + } + break + } + + case 'right': { + point1 = { + x: thisObject.container.frame.width - 3, + y: 3 + } + + point2 = { + x: thisObject.container.frame.width - 3, + y: thisObject.container.frame.height - 3 + } + + point3 = { + x: 3, + y: thisObject.container.frame.height / 2 + } + break + } + } + + /* Now the transformations. */ + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + if (thisObject.fitFunction !== undefined) { + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + } + + /* Lets start the drawing. */ + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point1.x, point1.y) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + + browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)' + browserCanvasContext.fill() + } +} diff --git a/Panels/PlotterPanel.js b/Panels/PlotterPanel.js index 24ef4f91f..9dde50073 100644 --- a/Panels/PlotterPanel.js +++ b/Panels/PlotterPanel.js @@ -22,7 +22,7 @@ function newPlotterPanel () { let heightFactor = 1 let currentRecord - let panelTabButton + let upDownButton let panelNode return thisObject @@ -35,8 +35,8 @@ function newPlotterPanel () { heightFactor = undefined currentRecord = undefined - panelTabButton.finalize() - panelTabButton = undefined + upDownButton.finalize() + upDownButton = undefined panelNode = undefined } @@ -50,18 +50,18 @@ function newPlotterPanel () { 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 - panelTabButton.container.frame.parentFrame = thisObject.container.frame - panelTabButton.fitFunction = thisObject.fitFunction - panelTabButton.initialize() + upDownButton = newUpDownButton() + upDownButton.parentContainer = thisObject.container + upDownButton.container.frame.parentFrame = thisObject.container.frame + upDownButton.fitFunction = thisObject.fitFunction + upDownButton.initialize() } function getContainer (point) { if (thisObject.isVisible !== true) { return } let container - container = panelTabButton.getContainer(point) + container = upDownButton.getContainer(point) if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { @@ -87,7 +87,7 @@ function newPlotterPanel () { thisObject.container.frame.draw(false, false, true, thisObject.fitFunction) plotCurrentRecordData() - panelTabButton.draw() + upDownButton.draw() } function plotCurrentRecordData () { @@ -153,33 +153,8 @@ function newPlotterPanel () { valuePosition = panelData.code.valuePosition } - printLabel(labelText, X_AXIS, PANEL_HEIGHT * labelPosition / 100 / heightFactor, '1') - printLabel(value, X_AXIS, PANEL_HEIGHT * valuePosition / 100 / heightFactor, '0.50') + printLabel(labelText, X_AXIS, PANEL_HEIGHT * labelPosition / 100 / heightFactor, '0.60', undefined, undefined, true, thisObject.container, thisObject.fitFunction) + printLabel(value, X_AXIS, PANEL_HEIGHT * valuePosition / 100 / heightFactor, '1.00', 15, undefined, true, thisObject.container, thisObject.fitFunction) } - - function printLabel (labelToPrint, x, y, opacity) { - let labelPoint - let fontSize = 10 - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY - - let label = '' + labelToPrint - - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO - - labelPoint = { - x: x - xOffset, - y: y - } - - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - labelPoint = thisObject.fitFunction(labelPoint) - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - - browserCanvasContext.closePath() - browserCanvasContext.fill() } } diff --git a/Panels/PanelTabButton.js b/Panels/UpDownButton.js similarity index 90% rename from Panels/PanelTabButton.js rename to Panels/UpDownButton.js index 2d4b37565..bb542d183 100644 --- a/Panels/PanelTabButton.js +++ b/Panels/UpDownButton.js @@ -1,4 +1,4 @@ -function newPanelTabButton () { +function newUpDownButton () { let thisObject = { container: undefined, fitFunction: undefined, @@ -16,12 +16,12 @@ function newPanelTabButton () { /* Cointainer stuff */ thisObject.container = newContainer() - thisObject.container.name = 'Panel Tab Button' + thisObject.container.name = 'Up Down Button' thisObject.container.initialize() thisObject.container.isClickeable = true - thisObject.container.frame.containerName = 'Panel Tab Button' + thisObject.container.isDraggeable = false + thisObject.container.frame.containerName = 'Up Down Button' - /* Animation to hide the pannel */ thisObject.status = 'up' let upPosition = {} let downPosition = {} @@ -44,12 +44,12 @@ function newPanelTabButton () { } function initialize () { - thisObject.container.frame.width = 10 - thisObject.container.frame.height = 10 + thisObject.container.frame.width = 12 + thisObject.container.frame.height = 12 - var position = { - x: thisObject.parentContainer.frame.width - 14, - y: 1 + let position = { + x: thisObject.container.frame.parentFrame.width * 5.75 / 8 - thisObject.container.frame.width / 2, + y: 40 * 4 / 8 - thisObject.container.frame.height / 2 } thisObject.container.frame.position = position @@ -127,19 +127,10 @@ function newPanelTabButton () { drawButton() } - function getContainer (point) { + function getContainer (point, purpose) { let container - - /* First we check if thisObject point is inside thisObject space. */ - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - /* Now we see which is the inner most container that has it */ - return thisObject.container - } else { - /* This point does not belong to thisObject space. */ - - return undefined } } diff --git a/Plotter.js b/Plotter.js index e23e87dc3..fdd1cce45 100644 --- a/Plotter.js +++ b/Plotter.js @@ -24,7 +24,6 @@ function newPlotter () { thisObject.container = container let coordinateSystem - let plotterModuleConfig 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() @@ -82,7 +81,6 @@ function newPlotter () { finalizeCoordinateSystem() coordinateSystem = undefined - plotterModuleConfig = undefined slotHeight = undefined mustRecalculateDataPoints = undefined atMousePositionFillStyles = undefined @@ -498,6 +496,10 @@ function newPlotter () { for (let i = 0; i < records.length; i++) { let record = records[i] + /* + In the formulas to create plotters, we allos users to reference the previous record. + To enable that we need to link all records to the previous one in this way. + */ if (i == 0) { record.previous = record } else { @@ -555,7 +557,7 @@ function newPlotter () { if (logged === false) { logged = true } - /* Only calculate the datapoints for this record, if we have not calculate it before. */ + /* It seems we need to calculate the data points this time. */ for (let k = 0; k < productDefinition.referenceParent.shapes.chartPoints.length; k++) { let chartPoints = productDefinition.referenceParent.shapes.chartPoints[k] for (let j = 0; j < chartPoints.points.length; j++) { @@ -582,13 +584,6 @@ function newPlotter () { /* Store the data point at the local map */ dataPoints.set(point.id, dataPoint) - - 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.chartingSpace.viewport.visibleArea.topLeft.y - } - } } } } @@ -769,7 +764,7 @@ function newPlotter () { } } - if (coordinateSystem.autoMinYScale === true || coordinateSystem.autosMaxScale === true) { + if (coordinateSystem.autoMinYScale === true || coordinateSystem.autoMinYScale === true) { mustRecalculateDataPoints = true } else { mustRecalculateDataPoints = false diff --git a/PostLoader.js b/PostLoader.js index bb34c97ea..567be6bdf 100644 --- a/PostLoader.js +++ b/PostLoader.js @@ -1,6 +1,5 @@ let canvas let markets -let ecosystem = newEcosystem() let systemEventHandler let APP_SCHEMA_MAP = new Map() diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 07b2396a7..8e208d9b3 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -14,6 +14,7 @@ function newRateScale () { onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer, physics: physics, draw: draw, + drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, initialize: initialize, @@ -56,6 +57,10 @@ function newRateScale () { let scaleDisplayTimer = 0 let autoScaleButton + + let wheelDeltaDirection + let wheelDeltaCounter = 0 + return thisObject function finalize () { @@ -134,6 +139,42 @@ function newRateScale () { } function onMouseWheel (event) { + if (IS_MAC) { + let sensitivity + if (event.wheelDelta < 0) { + if (event.shiftKey === true) { + sensitivity = 20 + } else { + sensitivity = 5 + } + if (wheelDeltaDirection === -1) { + wheelDeltaCounter++ + if (wheelDeltaCounter < sensitivity) { + return + } else { + wheelDeltaCounter = 0 + } + } else { + wheelDeltaCounter = 0 + wheelDeltaDirection = -1 + return + } + } else { + if (wheelDeltaDirection === 1) { + wheelDeltaCounter++ + if (wheelDeltaCounter < sensitivity) { + return + } else { + wheelDeltaCounter = 0 + } + } else { + wheelDeltaCounter = 0 + wheelDeltaDirection = 1 + return + } + } + } + if (event.shiftKey === true) { autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event) return @@ -370,6 +411,10 @@ function newRateScale () { thisObject.isVisible = false thisObject.payload.isVisible = false } + + if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) { + thisObject.isVisible = false + } } function draw () { @@ -387,13 +432,54 @@ function newRateScale () { } } + function drawBackground () { + drawScale() + } + + function drawScale () { + const SEPARATION = 50 + const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.height / SEPARATION) + const FONT_SIZE = 15 + + for (let i = 0; i <= NUMBER_OF_LABELS; i++) { + let ratePoint1 = { + x: 0, + y: TOP_SPACE_HEIGHT + SEPARATION * (i + 1) + } + let ratePoint2 = { + x: 0, + y: TOP_SPACE_HEIGHT + SEPARATION * (i + 0) + } + + let rate = getRateFromPointAtBrowserCanvas(ratePoint1, rateCalculationsContainer, coordinateSystem) + let labels = scaleLabels(rate) + let decimalsDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO + + let fitPoint1 = thisObject.fitFunction(ratePoint1) + let fitPoint2 = thisObject.fitFunction(ratePoint2) + + if (fitPoint1.y === ratePoint1.y && fitPoint2.y === ratePoint2.y) { + drawLabel(labels[1], 1 / 2, 0, 0, 0, FONT_SIZE, thisObject.container, UI_COLOR.GREY, undefined, ratePoint1.y) + drawLabel(labels[2], 1 / 2, 0, decimalsDisplace, -5, 9, thisObject.container, UI_COLOR.GREY, undefined, ratePoint1.y) + } + } + } + function drawScaleBox () { if (thisObject.rate === undefined) { return } if (thisObject.payload === undefined) { return } if (thisObject.payload.node === undefined) { return } - let rate = thisObject.rate + let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) + let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type) + let backgroundColor = UI_COLOR.BLACK + let labels = scaleLabels(thisObject.rate) + + drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor) + } + + function scaleLabels (rate) { if (rate < coordinateSystem.min.y) { rate = coordinateSystem.min.y } @@ -401,23 +487,23 @@ function newRateScale () { rate = coordinateSystem.max.y } - let label = (rate - Math.trunc(rate)).toFixed(2) + let label = dynamicDecimals(rate) let labelArray = label.split('.') 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.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 (rate < 1) { + label2 = label + label3 = '' + } if (scaleDisplayTimer > 0) { label2 = (coordinateSystem.scale.y * 10000).toFixed(2) label3 = 'SCALE' } - drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor) + return [label1, label2, label3] } } diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js index 5015c1e31..9c718e28e 100644 --- a/Scales/TimeFrameScale.js +++ b/Scales/TimeFrameScale.js @@ -8,6 +8,7 @@ function newTimeFrameScale () { payload: undefined, isVisible: true, layersOn: undefined, + adjustTimeFrame: adjustTimeFrame, onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer, draw: draw, drawForeground: drawForeground, @@ -21,7 +22,7 @@ function newTimeFrameScale () { const TIME_PERIOD_DEFAULT_VALUE = 0 const MIN_HEIGHT = 50 - let previousIsVisible = true + let displayingRealTimeFrame = true let greyOutCoverLayer = false let isMouseOver @@ -44,6 +45,10 @@ function newTimeFrameScale () { } } setupContainer() + + let wheelDeltaDirection + let wheelDeltaCounter = 0 + return thisObject function setupContainer () { @@ -119,21 +124,28 @@ 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)) { + function adjustTimeFrame (elementsPlotted) { + const ELEMENTS_PLOTTED_THREASHOLD = 500 + if ( + canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME && + displayingRealTimeFrame === false + ) { let event = {} event.timeFrame = thisObject.timeFrame thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event) - previousIsVisible = true + displayingRealTimeFrame = true } - if ((thisObject.isVisible === false && previousIsVisible === true) || (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) { + if ( + elementsPlotted > ELEMENTS_PLOTTED_THREASHOLD && + canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME && + displayingRealTimeFrame === true + ) { let event = {} event.timeFrame = ONE_DAY_IN_MILISECONDS thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event) - previousIsVisible = false + displayingRealTimeFrame = false } } @@ -212,6 +224,10 @@ function newTimeFrameScale () { thisObject.isVisible = false thisObject.payload.isVisible = false } + + if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) { + thisObject.isVisible = false + } } function onViewportZoomChanged (event) { @@ -237,7 +253,43 @@ function newTimeFrameScale () { } function onMouseWheel (event) { - delta = event.wheelDelta + if (IS_MAC) { + let sensitivity + if (event.wheelDelta < 0) { + if (event.shiftKey === true) { + sensitivity = 20 + } else { + sensitivity = 5 + } + if (wheelDeltaDirection === -1) { + wheelDeltaCounter++ + if (wheelDeltaCounter < sensitivity) { + return + } else { + wheelDeltaCounter = 0 + } + } else { + wheelDeltaCounter = 0 + wheelDeltaDirection = -1 + return + } + } else { + if (wheelDeltaDirection === 1) { + wheelDeltaCounter++ + if (wheelDeltaCounter < sensitivity) { + return + } else { + wheelDeltaCounter = 0 + } + } else { + wheelDeltaCounter = 0 + wheelDeltaDirection = 1 + return + } + } + } + + let delta = event.wheelDelta if (delta < 0) { timeFrameIndex-- if (timeFrameIndex < 0) { diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index f87354e66..5ceeb9492 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -12,6 +12,7 @@ function newTimeScale () { onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer, physics: physics, draw: draw, + drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, initialize: initialize, @@ -48,6 +49,9 @@ function newTimeScale () { } } + let wheelDeltaDirection + let wheelDeltaCounter = 0 + return thisObject function finalize () { @@ -116,6 +120,42 @@ function newTimeScale () { } function onMouseWheel (event) { + if (IS_MAC) { + let sensitivity + if (event.wheelDelta < 0) { + if (event.shiftKey === true) { + sensitivity = 20 + } else { + sensitivity = 5 + } + if (wheelDeltaDirection === -1) { + wheelDeltaCounter++ + if (wheelDeltaCounter < sensitivity) { + return + } else { + wheelDeltaCounter = 0 + } + } else { + wheelDeltaCounter = 0 + wheelDeltaDirection = -1 + return + } + } else { + if (wheelDeltaDirection === 1) { + wheelDeltaCounter++ + if (wheelDeltaCounter < sensitivity) { + return + } else { + wheelDeltaCounter = 0 + } + } else { + wheelDeltaCounter = 0 + wheelDeltaDirection = 1 + return + } + } + } + if (event.shiftKey === true) { autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event) return @@ -245,6 +285,48 @@ function newTimeScale () { thisObject.container.frame.position.x < upCorner.x) { thisObject.isVisible = false } + + if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) { + thisObject.isVisible = false + } + } + + function drawBackground () { + drawScale() + } + + function drawScale () { + const SEPARATION = 150 + const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.width / SEPARATION) + const FONT_SIZE = 15 + + for (let i = 0; i <= NUMBER_OF_LABELS; i++) { + let timePoint = { + x: SEPARATION * (i + 1), + y: 0 + } + + let time = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem) + let labels = scaleLabels(time, true) + let labelDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO + + let timePoint1 = { + x: SEPARATION * (i + 1) - labelDisplace, + y: 0 + } + let timePoint2 = { + x: SEPARATION * (i + 1) + labelDisplace, + y: 0 + } + + let fitPoint1 = thisObject.fitFunction(timePoint1) + let fitPoint2 = thisObject.fitFunction(timePoint2) + + if (fitPoint1.x === timePoint1.x && fitPoint2.x === timePoint2.x) { + drawLabel(labels[1], 1 / 2, 0, 18, 17, FONT_SIZE, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined) + drawLabel(labels[2], 1 / 2, 0, 18, 30, 12, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined) + } + } } function draw () { @@ -265,17 +347,27 @@ function newTimeScale () { function drawScaleBox () { if (thisObject.date === undefined) { return } - let label = thisObject.date.toUTCString() + let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) + let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type) + + let backgroundColor = UI_COLOR.BLACK + let labels = scaleLabels(thisObject.date) + + drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor) + } + + function scaleLabels (date, excludeYear) { + let label = date.toUTCString() let labelArray = label.split(' ') let label1 = thisObject.payload.node.payload.parentNode.name let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] let label3 = labelArray[4] - let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type) - let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type) + if (excludeYear === true) { + label2 = labelArray[1] + ' ' + labelArray[2] + } - let backgroundColor = UI_COLOR.BLACK - - drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor) + return [label1, label2, label3] } } + diff --git a/Spaces/ChartingSpace.js b/Spaces/ChartingSpace.js index be86e976b..dba998962 100644 --- a/Spaces/ChartingSpace.js +++ b/Spaces/ChartingSpace.js @@ -13,12 +13,13 @@ function newChartingSpace () { logger.fileName = MODULE_NAME let thisObject = { - visible: undefined, + visible: false, container: undefined, inViewport: undefined, timeMachines: undefined, viewport: undefined, payload: undefined, + onKeyPressed: onKeyPressed, reset: reset, oneScreenUp: oneScreenUp, oneScreenDown: oneScreenDown, @@ -77,8 +78,10 @@ function newChartingSpace () { thisObject.container.finalize() thisObject.container = undefined - thisObject.viewport.finalize() - thisObject.viewport = undefined + if (thisObject.viewport !== undefined) { + thisObject.viewport.finalize() + thisObject.viewport = undefined + } thisObject.payload = undefined } @@ -112,6 +115,7 @@ function newChartingSpace () { function getContainer (point, purpose) { if (thisObject.visible !== true) { return } + if (thisObject.viewport === undefined) { return } if (thisObject.viewport.isThisPointInViewport(point) === false) { return } let container @@ -134,10 +138,14 @@ function newChartingSpace () { container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { if (purpose !== undefined) { - containerFound = container + if (containerFound === undefined) { + containerFound = container + } } else { if (thisObject.container.frame.isThisPointHere(point, true) === true) { - containerFound = container + if (containerFound === undefined) { + containerFound = container + } } } } @@ -162,6 +170,7 @@ function newChartingSpace () { } function oneScreenUp () { + if (thisObject.visible === false) { return } let displaceVector = { x: 0, y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100 @@ -171,6 +180,7 @@ function newChartingSpace () { } function oneScreenDown () { + if (thisObject.visible === false) { return } let displaceVector = { x: 0, y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100 @@ -180,6 +190,7 @@ function newChartingSpace () { } function oneScreenLeft () { + if (thisObject.visible === false) { return } let displaceVector = { x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100, y: 0 @@ -189,6 +200,7 @@ function newChartingSpace () { } function oneScreenRight () { + if (thisObject.visible === false) { return } let displaceVector = { x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100, y: 0 @@ -251,15 +263,25 @@ function newChartingSpace () { } function physics () { + thisObjectPhysics() + if (thisObject.visible !== true) { return } if (thisObject.viewport !== undefined) { thisObject.viewport.physics() } - - thisObjectPhysics() childrenPhysics() syncWithDesigner() } + function onKeyPressed (event) { + if (thisObject.visible !== true) { return } + for (let j = 0; j < thisObject.timeMachines.length; j++) { + let timeMachine = thisObject.timeMachines[j] + if (timeMachine.onFocus === true) { + timeMachine.onKeyPressed(event) + } + } + } + function syncWithDesigner () { if (thisObject.payload === undefined) { return } if (thisObject.payload.node === undefined) { return } @@ -310,8 +332,8 @@ function newChartingSpace () { timeMachine.payload.uiObject.setValue('Loading...') /* Setting up the new time machine. */ - timeMachine.container.frame.position.x = browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2 - timeMachine.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2 + timeMachine.container.frame.position.x = browserCanvas.width / 2 - browserCanvas.width / TIME_MACHINE_WIDTH / 2 + timeMachine.container.frame.position.y = browserCanvas.height / 2 - (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT / 2 timeMachine.initialize(onTimeMachineInitialized) function onTimeMachineInitialized () { @@ -327,10 +349,16 @@ function newChartingSpace () { function thisObjectPhysics () { thisObject.container.frame.height = COCKPIT_SPACE_POSITION - if (thisObject.container.frame.height <= 0 / 100) { + if (thisObject.container.frame.height <= TOP_SPACE_HEIGHT) { thisObject.visible = false + if (thisObject.viewport !== undefined) { + thisObject.viewport.visible = false + } } else { thisObject.visible = true + if (thisObject.viewport !== undefined) { + thisObject.viewport.visible = true + } } if (canvas.chartingSpace.viewport !== undefined) { @@ -355,6 +383,7 @@ function newChartingSpace () { } function drawBackground () { + if (thisObject.visible === false) { return } drawSpaceBackground() for (let i = 0; i < thisObject.timeMachines.length; i++) { @@ -364,7 +393,7 @@ function newChartingSpace () { } function draw () { - if (thisObject.visible !== true) { return } + if (thisObject.visible === false) { return } drawBackground() for (let i = 0; i < thisObject.timeMachines.length; i++) { diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index 01fea0e08..3291428ec 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -5,7 +5,6 @@ let thisObject = { container: undefined, status: 'BOTTOM', - assetBalances: undefined, fullscreen: undefined, toTop: toTop, toBottom: toBottom, @@ -40,7 +39,6 @@ thisObject.container.finalize() thisObject.container = undefined - thisObject.assetBalances = undefined thisObject.fullscreen = undefined } @@ -65,9 +63,6 @@ canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - thisObject.assetBalances = newQuotedAssetalances() - thisObject.assetBalances.initialize() - thisObject.fullscreen = newFullScreen() thisObject.fullscreen.container.connectToParent(thisObject.container) thisObject.fullscreen.initialize() @@ -185,7 +180,6 @@ drawBackground() - thisObject.assetBalances.draw() // thisObject.fullscreen.draw() } diff --git a/Spaces/DesignSpace.js b/Spaces/DesignSpace.js index d1c1f7faf..55b345426 100644 --- a/Spaces/DesignSpace.js +++ b/Spaces/DesignSpace.js @@ -1,6 +1,6 @@ function newDesignSpace () { - const MODULE_NAME = 'Strategy Space' + const MODULE_NAME = 'Designe Space' let thisObject = { sidePanel: undefined, container: undefined, @@ -265,7 +265,20 @@ function newDesignSpace () { 'key-down', 'key-left', 'key-right', - 'key-up' + 'key-up', + 'master-script', + 'scripts-library', + 'super-action', + 'super-scripts', + 'template-script', + 'template-structure', + 'template-target', + 'delink', + 'detach', + 'help', + 'key-a', + 'key-m', + 'key-r' ] for (let i = 0; i < iconsNames.length; i++) { diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index bd84fd983..f04a22767 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -11,6 +11,17 @@ function newFloatingSpace () { floatingLayer: undefined, // This is the array of floatingObjects being displayed uiObjectConstructor: undefined, container: undefined, + inMapMode: false, + drawReferenceLines: false, + drawChainLines: true, + toggleDrawChainLines: toggleDrawChainLines, + toggleDrawReferenceLines: toggleDrawReferenceLines, + toggleMapMode: toggleMapMode, + enterMapMode: enterMapMode, + exitMapMode: exitMapMode, + transformPointToMap: transformPointToMap, + transformRadiusToMap: transformRadiusToMap, + transformImagesizeToMap: transformImagesizeToMap, oneScreenUp: oneScreenUp, oneScreenDown: oneScreenDown, oneScreenLeft: oneScreenLeft, @@ -34,6 +45,7 @@ function newFloatingSpace () { thisObject.container.isDraggeable = true thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true + thisObject.container.isClickeable = false thisObject.container.frame.radius = 0 let devicePixelRatio = window.devicePixelRatio @@ -47,12 +59,12 @@ function newFloatingSpace () { let visible = false const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25 - let eventSubscriptionId + let onDragStartedEventSubscriptionId return thisObject function finalize () { - thisObject.container.eventHandler.stopListening(eventSubscriptionId) + thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId) thisObject.floatingLayer.finalize() thisObject.uiObjectConstructor.finalize() @@ -70,12 +82,111 @@ function newFloatingSpace () { thisObject.uiObjectConstructor = newUiObjectConstructor() thisObject.uiObjectConstructor.initialize(thisObject.floatingLayer) - eventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted) + } + + function toggleDrawReferenceLines () { + if (thisObject.drawReferenceLines === true) { + thisObject.drawReferenceLines = false + } else { + thisObject.drawReferenceLines = true + } + } + + function toggleDrawChainLines () { + if (thisObject.drawChainLines === true) { + thisObject.drawChainLines = false + } else { + thisObject.drawChainLines = true + } + } + + function transformPointToMap (point) { + let returnPoint = { + x: point.x - thisObject.container.frame.position.x, + y: point.y - thisObject.container.frame.position.y + } + returnPoint.x = returnPoint.x / SPACE_SIZE * browserCanvas.width + returnPoint.y = returnPoint.y / SPACE_SIZE * browserCanvas.height + return returnPoint + } + + function transformRadiusToMap (radius) { + const RADIUS_REDUCTION_FACTOR = 2 + return radius / RADIUS_REDUCTION_FACTOR + } + + function transformImagesizeToMap (imageSize) { + const IMAGE_REDUCTION_FACTOR = 3 + return imageSize / IMAGE_REDUCTION_FACTOR + } + + function enterMapMode () { + thisObject.inMapMode = true + } + + function exitMapMode () { + thisObject.inMapMode = false + } + + function toggleMapMode () { + if (thisObject.inMapMode === false) { + enterMapMode() + } else { + exitMapMode() + } + } + + function onDragStarted (event) { + if (thisObject.inMapMode === false) { + if (event.buttons !== 2) { return } + event.candelDragging = true + enterMapMode() + } else { + if (event.buttons !== 1) { + event.candelDragging = true + return + } + + let mousePosition = { + x: event.x, + y: event.y + } + + let mouseAtSpace = { + x: mousePosition.x / browserCanvas.width * SPACE_SIZE, + y: mousePosition.y / browserCanvas.height * SPACE_SIZE + } + /* Let's see if we can snap to some of the root nodes that are isHierarchyHead */ + let snapCandidateNodes = canvas.designSpace.workspace.getHierarchyHeads() + for (let i = 0; i < snapCandidateNodes.length; i++) { + let node = snapCandidateNodes[i] + let nodePosition = { + x: node.payload.floatingObject.container.frame.position.x, + y: node.payload.floatingObject.container.frame.position.y + } + // nodePosition = node.payload.floatingObject.container.frame.frameThisPoint(nodePosition) + + let distance = Math.sqrt(Math.pow(mouseAtSpace.x - nodePosition.x, 2) + Math.pow(mouseAtSpace.y - nodePosition.y, 2)) + const SNAP_THREASHOLD = 1000 + if (distance < SNAP_THREASHOLD) { + mousePosition.x = nodePosition.x / SPACE_SIZE * browserCanvas.width + mousePosition.y = nodePosition.y / SPACE_SIZE * browserCanvas.height + } + } + + /* Movign the Floating Space to where the mouse is. */ + thisObject.container.frame.position.x = -mousePosition.x / browserCanvas.width * SPACE_SIZE + browserCanvas.width / 2 + thisObject.container.frame.position.y = -mousePosition.y / browserCanvas.height * SPACE_SIZE + browserCanvas.height / 2 + + exitMapMode() + } } function isItFar (payload, dontCheckParent) { /* If for any reason the paylaod is undefined we return false */ if (payload === undefined) { return false } + if (thisObject.inMapMode === true) { return false } let radarFactor = 2 // How big is the margin @@ -92,7 +203,8 @@ function newFloatingSpace () { payload.node.type === 'Network' || payload.node.type === 'Crypto Ecosystem' || payload.node.type === 'Charting Space' || - payload.node.type === 'Data Mine' + payload.node.type === 'Data Mine' || + payload.node.type === 'Super Scripts' ) { return false } @@ -151,6 +263,7 @@ function newFloatingSpace () { } function oneScreenUp () { + if (visible === false) { return } let displaceVector = { x: 0, y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100 @@ -161,6 +274,7 @@ function newFloatingSpace () { } function oneScreenDown () { + if (visible === false) { return } let displaceVector = { x: 0, y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100 @@ -171,6 +285,7 @@ function newFloatingSpace () { } function oneScreenLeft () { + if (visible === false) { return } let displaceVector = { x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100, y: 0 @@ -181,6 +296,7 @@ function newFloatingSpace () { } function oneScreenRight () { + if (visible === false) { return } let displaceVector = { x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100, y: 0 @@ -221,10 +337,6 @@ function newFloatingSpace () { return true } - function onMouseWheel (event) { - thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta) - } - function makeVisible () { visible = true } @@ -234,6 +346,7 @@ function newFloatingSpace () { } function getContainer (point) { + if (visible === false) { return } let container container = thisObject.floatingLayer.getContainer(point) @@ -249,9 +362,24 @@ function newFloatingSpace () { } function physics () { - if (visible === true) { - browserZoomPhysics() - thisObject.floatingLayer.physics() + if (visible === false) { return } + browserZoomPhysics() + positionContraintsPhysics() + thisObject.floatingLayer.physics() + } + + function positionContraintsPhysics () { + if (thisObject.container.frame.position.x > 0) { + thisObject.container.frame.position.x = 0 + } + if (thisObject.container.frame.position.y > 0) { + thisObject.container.frame.position.y = 0 + } + if (thisObject.container.frame.position.x + thisObject.container.frame.width < browserCanvas.width) { + thisObject.container.frame.position.x = browserCanvas.width - thisObject.container.frame.width + } + if (thisObject.container.frame.position.y + thisObject.container.frame.height < browserCanvas.height) { + thisObject.container.frame.position.y = browserCanvas.height - thisObject.container.frame.height } } @@ -265,10 +393,9 @@ function newFloatingSpace () { } function draw () { - if (visible === true) { - drawBackground() - thisObject.floatingLayer.draw() - } + if (visible === false) { return } + drawBackground() + thisObject.floatingLayer.draw() } function drawBackground () { diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index b1bd3ebc6..fbfb144f6 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -165,18 +165,34 @@ function newPanelsSpace () { 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') { - if (centerPoint.x < verticalLine) { - panel.gravitatesTowards = 'topLeft' + if (panel.upDownButton !== undefined) { + if (panel.upDownButton.status === 'up') { + if (panel.leftRightButton !== undefined) { + if (panel.leftRightButton.status === 'left') { + panel.gravitatesTowards = 'topLeft' + } else { + panel.gravitatesTowards = 'topRight' + } } else { - panel.gravitatesTowards = 'topRight' + if (centerPoint.x < verticalLine) { + panel.gravitatesTowards = 'topLeft' + } else { + panel.gravitatesTowards = 'topRight' + } } } else { - if (centerPoint.x < verticalLine) { - panel.gravitatesTowards = 'bottomLeft' + if (panel.leftRightButton !== undefined) { + if (panel.leftRightButton.status === 'left') { + panel.gravitatesTowards = 'bottomLeft' + } else { + panel.gravitatesTowards = 'bottomRight' + } } else { - panel.gravitatesTowards = 'bottomRight' + if (centerPoint.x < verticalLine) { + panel.gravitatesTowards = 'bottomLeft' + } else { + panel.gravitatesTowards = 'bottomRight' + } } } } else { @@ -197,6 +213,10 @@ function newPanelsSpace () { /* According to the quadrant we push the panels to the sides */ if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'bottomLeft') { panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x + if (panel.leftRightButton !== undefined) { + if (panel.leftRightButton.status === 'left' || panel.leftRightButton.status === 'right') { // we avoid pushing other panels while in transition + } + } isOverlapping(i, panel.container) if (panel.container.frame.position.x < 0) { panel.container.frame.position.x = 0 @@ -246,6 +266,11 @@ function newPanelsSpace () { for (let i = 0; i < currentIndex; i++) { let panel = thisObject.panels[i] + if (panel.leftRightButton !== undefined) { + if (panel.leftRightButton.status !== 'left' && panel.leftRightButton.status !== 'right') { // we avoid pushing other panels while in transition + continue + } + } if (panel.isVisible === true && panel.isHidden === false) { if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) { pushOut(currentContainer, panel.container, panel.gravitatesTowards) @@ -326,7 +351,7 @@ function newPanelsSpace () { } } - function getContainer (point) { + function getContainer (point, purpose) { if (thisObject.visible !== true) { return } let container @@ -339,7 +364,7 @@ function newPanelsSpace () { let owner = canvas.chartingSpace.inViewport.get(panel.owner) if (owner !== undefined) { if (panel.isVisible === true && panel.isHidden === false) { - container = panel.getContainer(point) + container = panel.getContainer(point, purpose) } } if (container !== undefined) { @@ -347,7 +372,7 @@ function newPanelsSpace () { return container } } - thisObject.container.space = 'Panels Space' - return thisObject.container + // thisObject.container.space = 'Panels Space' + // return thisObject.container } } diff --git a/Utilities.js b/Utilities.js index 2588156b9..48750b49b 100644 --- a/Utilities.js +++ b/Utilities.js @@ -22,6 +22,22 @@ function drawContainerBackground (container, color, opacity, fitFunction) { browserCanvasContext.fill() } +function dynamicDecimals (value, minDecimals) { + if (minDecimals === undefined) { + minDecimals = 0 + } + let decimals = 2 + if (value < 1) { decimals = 4 } + if (Math.abs(Math.trunc(value * 100)) < 1) { decimals = 6 } + if (Math.abs(Math.trunc(value * 10000)) < 1) { decimals = 8 } + if (Math.abs(Math.trunc(value * 1000000)) < 1) { decimals = 10 } + if (Math.abs(Math.trunc(value * 100000000)) < 1) { decimals = 12 } + if (Math.abs(Math.trunc(value * 10000000000)) < 1) { value = 0; decimals = 0 } + if (Math.trunc(value) === value) { decimals = minDecimals } + let returnValue = Number(value).toFixed(decimals) + return returnValue +} + function savePropertyAtNodeConfig (payload, propertyName, value) { try { let code = JSON.parse(payload.node.code) @@ -194,7 +210,7 @@ function getMilisecondsFromPoint (point, container, coordinateSystem) { return point.x } -function moveToUserPosition (container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition) { +function moveToUserPosition (container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition, fitFunction) { let targetPoint = { x: currentDate.valueOf(), y: currentRate @@ -228,15 +244,45 @@ function removeTime (datetime) { return dateOnly } -function printLabel (labelToPrint, x, y, opacity, fontSize, color) { +function printLabel (labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals) { let labelPoint if (color === undefined) { color = UI_COLOR.DARK } + if (fontSize === undefined) { fontSize = 10 }; browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - let label = '' + labelToPrint + let label = labelToPrint + if (isNaN(label) === false && label !== '') { + label = dynamicDecimals(labelToPrint) + label = label.toLocaleString() + if (noDecimals === true) { + label = Math.trunc(label) + } + } + let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + + if (center === true) { + labelPoint = { + x: x - xOffset, + y: y + } + } else { + labelPoint = { + x: x, + y: y + } + } + + if (container !== undefined) { + labelPoint = container.frame.frameThisPoint(labelPoint) + } + + if (fitFunction !== undefined) { + labelPoint = fitFunction(labelPoint) + } + browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')' - browserCanvasContext.fillText(label, x, y) + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } function newUniqueId () { diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 7ce98884c..e21100bf3 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -105,8 +105,9 @@ function roundedCornersBackground (params) { browserCanvasContext.stroke() } -function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, container) { +function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, container, fontColor, noFrameX, noFrameY) { if (label === undefined) { return } + if (fontColor === undefined) { fontColor = UI_COLOR.WHITE } let fontOffset = label.length * fontSize * FONT_ASPECT_RATIO + 10 let labelPoint = { @@ -116,8 +117,16 @@ function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, contain labelPoint = container.frame.frameThisPoint(labelPoint) + if (noFrameX !== undefined) { + labelPoint.x = noFrameX + xOffset + } + + if (noFrameY !== undefined) { + labelPoint.y = noFrameY + yOffset + } + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillStyle = 'rgba(' + fontColor + ', 1)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } diff --git a/VideoRecorder.js b/VideoRecorder.js index e84336c95..f222a8358 100644 --- a/VideoRecorder.js +++ b/VideoRecorder.js @@ -1,10 +1,20 @@ function newVideoRecorder () { let thisObject = { - recordCanvas: recordCanvas + recordCanvas: recordCanvas, + physics: physics } let lastAction + let wheelAnimationCounter = 0 + let lastWheelPointerIcon return thisObject + function physics () { + wheelAnimationCounter-- + if (wheelAnimationCounter < 0) { + wheelAnimationCounter = 0 + } + } + function recordCanvas () { { const DISTANCE_BETWEEN_ICONS = 35 @@ -33,16 +43,52 @@ function newVideoRecorder () { break } case 'wheel': { + wheelAnimationCounter = 25 if (canvas.mouse.event.delta > 0) { pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up') + lastWheelPointerIcon = pointerIcon } else { pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down') + lastWheelPointerIcon = pointerIcon } break } case 'key down': { - pointerIcon = mousePointerIcon + if (wheelAnimationCounter > 0) { + pointerIcon = lastWheelPointerIcon + } else { + pointerIcon = mousePointerIcon + } + let key = canvas.mouse.event.key + if (key === undefined) { break } + switch (key.toLowerCase()) { + case 'Escape': + { + pointerIcon = canvas.designSpace.iconCollection.get('key-m') + break + } + case 'm': + { + pointerIcon = canvas.designSpace.iconCollection.get('key-m') + break + } + case 'a': + { + pointerIcon = canvas.designSpace.iconCollection.get('key-a') + break + } + case 'r': + { + pointerIcon = canvas.designSpace.iconCollection.get('key-r') + break + } + case 'c': + { + pointerIcon = canvas.designSpace.iconCollection.get('key-r') + break + } + } break } case 'key up': { @@ -170,4 +216,3 @@ function newVideoRecorder () { } } } -