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

We can hide the Products Panel now.

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2019-03-20 16:10:31 +01:00
1 parent 971e547ab4
commit db3535fcae
10 files changed
+172 -87
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Canvas.js
+101 -78
View File
@@ -1,4 +1,4 @@

let browserCanvasContext // The context of the canvas object.
let stepsInitializationCounter = 0 // This counter the initialization steps required to be able to turn off the splash screen.
@@ -13,13 +13,14 @@ function newCanvas () {
const logger = newWebDebugLog()
logger.fileName = MODULE_NAME
/* Mouse event related variables. */
/* Mouse event related variables. */
let containerDragStarted = false
let floatingObjectDragStarted = false
let floatingObjectBeingDragged
let containerBeingDragged
let viewPortBeingDragged = false
let ignoreNextClick = false
let dragVector = {
downX: 0,
@@ -28,7 +29,7 @@ function newCanvas () {
upY: 0
}
/* canvas object */
/* canvas object */
let thisObject = {
eventHandler: undefined,
@@ -49,34 +50,34 @@ function newCanvas () {
return thisObject
/*
The canvas object represents a layer on top of the browser canvas object.
The canvas object represents a layer on top of the browser canvas object.
Graphically, thiscanvas object has 4 spaces:
Graphically, thiscanvas object has 4 spaces:
1. The "Top Space": It is where Team and User information is displayed.
2. The "Chart Space": It is where the charts are plotted.
3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.
4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.
5. The "Bottom Space": Includes the breakpoint bar and a toolbar.
1. The "Top Space": It is where Team and User information is displayed.
2. The "Chart Space": It is where the charts are plotted.
3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.
4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.
5. The "Bottom Space": Includes the breakpoint bar and a toolbar.
All these spaces are child objects of the Canvas object.
All these spaces are child objects of the Canvas object.
Canvas
|
|
---> topSpace
|
|
---> chartSpace
|
|
---> flaotingSpace
|
|
---> panelsSpace
|
|
---> bottomSpace
Canvas
|
|
---> topSpace
|
|
---> chartSpace
|
|
---> flaotingSpace
|
|
---> panelsSpace
|
|
---> bottomSpace
*/
function finalize () {
@@ -91,15 +92,15 @@ function newCanvas () {
browserCanvas.removeEventListener('mousemove', onMouseMove, false)
browserCanvas.removeEventListener('click', onMouseClick, false)
/* Mouse wheel events. */
/* Mouse wheel events. */
if (browserCanvas.removeEventListener) {
// IE9, Chrome, Safari, Opera
// IE9, Chrome, Safari, Opera
browserCanvas.removeEventListener('mousewheel', onMouseWheel, false)
// Firefox
// Firefox
browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false)
}
// IE 6/7/8
// IE 6/7/8
else browserCanvas.detachEvent('onmousewheel', onMouseWheel)
} catch (err) {
if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
@@ -114,7 +115,7 @@ function newCanvas () {
addCanvasEvents()
/* Instantiate all the children spaces of Canvas object */
/* Instantiate all the children spaces of Canvas object */
thisObject.topSpace = newTopSpace()
thisObject.topSpace.initialize()
@@ -142,7 +143,7 @@ function newCanvas () {
}
}
/* Splash Screen */
/* Splash Screen */
splashScreen = newSplashScreen()
splashScreen.initialize()
@@ -156,7 +157,7 @@ function newCanvas () {
thisObject.animation = animation
/* Here we add all the functions that will be called during the animation cycle. */
/* Here we add all the functions that will be called during the animation cycle. */
animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
@@ -177,7 +178,7 @@ function newCanvas () {
if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> Animation Stopped since a vital funtion could not be added.') }
/* Display some Error Page here. */
/* Display some Error Page here. */
}
} catch (err) {
if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err) }
@@ -240,23 +241,28 @@ function newCanvas () {
try {
if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') }
/* Mouse down and up events to control the drag of the canvas. */
/* Mouse down and up events to control the drag of the canvas. */
browserCanvas.addEventListener('mousedown', onMouseDown, false)
browserCanvas.addEventListener('mouseup', onMouseUp, false)
browserCanvas.addEventListener('mousemove', onMouseMove, false)
browserCanvas.addEventListener('click', onMouseClick, false)
/* Mouse wheel events. */
/* Mouse wheel events. */
if (browserCanvas.addEventListener) {
// IE9, Chrome, Safari, Opera
// IE9, Chrome, Safari, Opera
browserCanvas.addEventListener('mousewheel', onMouseWheel, false)
// Firefox
// Firefox
browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false)
}
// IE 6/7/8
// IE 6/7/8
else browserCanvas.attachEvent('onmousewheel', onMouseWheel)
// Disables the context menu when you right mouse click the canvas.
browserCanvas.oncontextmenu = function (e) {
e.preventDefault()
}
} catch (err) {
if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err) }
}
@@ -266,18 +272,18 @@ function newCanvas () {
try {
if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') }
/*
/*
There are four types of elements that can be dragged.
There are four types of elements that can be dragged.
1. Panels.
2. Floating Elements (Currently only FloatingObjects).
3. Charts.
4. The Viewport.
1. Panels.
2. Floating Elements (Currently only FloatingObjects).
3. Charts.
4. The Viewport.
We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport.
We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport.
*/
*/
let point = {
x: event.pageX,
@@ -289,7 +295,7 @@ function newCanvas () {
let container
/* We check if the mouse is over an element of the Top Space / */
/* We check if the mouse is over an element of the Top Space / */
container = thisObject.topSpace.getContainer(point)
@@ -299,7 +305,7 @@ function newCanvas () {
return
}
/* We check if the mouse is over an element of the Bottom Space / */
/* We check if the mouse is over an element of the Bottom Space / */
container = thisObject.bottomSpace.getContainer(point)
@@ -309,17 +315,22 @@ function newCanvas () {
return
}
/* We check if the mouse is over a panel/ */
/* We check if the mouse is over a panel/ */
container = thisObject.panelsSpace.getContainer(point)
if (container !== undefined && container.isDraggeable === true) {
if (container !== undefined && container.isDraggeable === true && event.button === 2) {
containerBeingDragged = container
containerDragStarted = true
return
}
/* We check if the mouse is over a floatingObject/ */
if (container !== undefined && container.isClickeable === true) {
/* We dont want to mess up with the click */
return
}
/* We check if the mouse is over a floatingObject/ */
floatingObjectBeingDragged = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
@@ -328,7 +339,7 @@ function newCanvas () {
return
}
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
container = thisObject.chartSpace.getContainer(point)
@@ -348,6 +359,10 @@ function newCanvas () {
try {
if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') }
if (ignoreNextClick === true) {
ignoreNextClick = false
return
}
let point = {
x: event.pageX,
y: event.pageY - window.canvasApp.topMargin
@@ -355,7 +370,7 @@ function newCanvas () {
let container
/* We check if the mouse is over an element of the Top Space / */
/* We check if the mouse is over an element of the Top Space / */
container = thisObject.topSpace.getContainer(point)
@@ -364,7 +379,7 @@ function newCanvas () {
return
}
/* We check if the mouse is over an element of the Bottom Space / */
/* We check if the mouse is over an element of the Bottom Space / */
container = thisObject.bottomSpace.getContainer(point)
@@ -373,7 +388,7 @@ function newCanvas () {
return
}
/* We check if the mouse is over a panel/ */
/* We check if the mouse is over a panel/ */
container = thisObject.panelsSpace.getContainer(point)
@@ -382,7 +397,7 @@ function newCanvas () {
return
}
/* We check if the mouse is over a floatingObject/ */
/* We check if the mouse is over a floatingObject/ */
let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
@@ -393,7 +408,7 @@ function newCanvas () {
return
}
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
container = thisObject.chartSpace.getContainer(point)
@@ -414,7 +429,14 @@ function newCanvas () {
thisObject.eventHandler.raiseEvent('Drag Finished', undefined)
}
/* Turn off all the possible things that can be dragged. */
if (
containerDragStarted ||
floatingObjectDragStarted ||
viewPortBeingDragged
) {
ignoreNextClick = true
}
/* Turn off all the possible things that can be dragged. */
containerDragStarted = false
floatingObjectDragStarted = false
@@ -443,8 +465,8 @@ function newCanvas () {
if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
if (floatingObjectDragStarted === true) {
if (thisObject.floatingSpace.floatingLayer.isInsideFloatingObject(floatingObjectBeingDragged, point.x, point.y) === false) {
/* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer.
In this case we cancell the drag operation . */
/* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer.
In this case we cancell the drag operation . */
floatingObjectDragStarted = false
browserCanvas.style.cursor = 'auto'
@@ -468,11 +490,11 @@ function newCanvas () {
try {
if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') }
/* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */
/* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */
thisObject.eventHandler.raiseEvent('onMouseNotOver')
/* Then we check who is the current object underneeth the mounse. */
/* Then we check who is the current object underneeth the mounse. */
let point = {
x: event.pageX,
@@ -481,7 +503,7 @@ function newCanvas () {
let container
/* We check if the mouse is over an element of the Top Space / */
/* We check if the mouse is over an element of the Top Space / */
container = thisObject.topSpace.getContainer(point)
@@ -490,7 +512,7 @@ function newCanvas () {
return
}
/* We check if the mouse is over an element of the Bottom Space / */
/* We check if the mouse is over an element of the Bottom Space / */
container = thisObject.bottomSpace.getContainer(point)
@@ -499,7 +521,7 @@ function newCanvas () {
return
}
/* We check if the mouse is over a panel/ */
/* We check if the mouse is over a panel/ */
container = thisObject.panelsSpace.getContainer(point)
@@ -508,7 +530,7 @@ function newCanvas () {
return
}
/* We check if the mouse is over a floatingObject/ */
/* We check if the mouse is over a floatingObject/ */
let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
@@ -519,7 +541,7 @@ function newCanvas () {
return
}
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
container = thisObject.chartSpace.getContainer(point)
@@ -536,11 +558,11 @@ function newCanvas () {
try {
if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') }
// cross-browser wheel delta
// cross-browser wheel delta
var event = window.event || event // old IE support
let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail))
/* We try first with panels. */
/* We try first with panels. */
let point = {
x: event.pageX,
@@ -554,7 +576,7 @@ function newCanvas () {
return false // This instructs the browser not to take the event and scroll the page.
}
/* We try second with floating objects. */
/* We try second with floating objects. */
let floatingObjectIndex = canvas.floatingSpace.floatingLayer.isInside(point.x, point.y)
@@ -563,7 +585,7 @@ function newCanvas () {
return false // This instructs the browser not to take the event and scroll the page.
}
/* We try the Bottom Space. */
/* We try the Bottom Space. */
let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y })
@@ -572,7 +594,7 @@ function newCanvas () {
return false // This instructs the browser not to take the event and scroll the page.
}
/* Finally we try the Chart Space. */
/* Finally we try the Chart Space. */
let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y })
@@ -580,7 +602,7 @@ function newCanvas () {
chartContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta)
return false // This instructs the browser not to take the event and scroll the page.
} else {
/* If all the above fails, we fallback into applying zoom to the viewPort */
/* If all the above fails, we fallback into applying zoom to the viewPort */
viewPort.applyZoom(delta)
return false // This instructs the browser not to take the event and scroll the page.
@@ -613,7 +635,7 @@ function newCanvas () {
}
if (containerDragStarted || viewPortBeingDragged) {
/* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */
/* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */
let downCopy = {
x: dragVector.downX,
@@ -622,7 +644,7 @@ function newCanvas () {
let downCopyNoTransf
downCopyNoTransf = viewPort.unzoomThisPoint(downCopy)
// downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf);
// downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf);
let upCopy = {
x: dragVector.upX,
@@ -647,7 +669,7 @@ function newCanvas () {
}
}
/* Finally we set the starting point of the new dragVector at this current point. */
/* Finally we set the starting point of the new dragVector at this current point. */
dragVector.downX = dragVector.upX
dragVector.downY = dragVector.upY
@@ -657,3 +679,4 @@ function newCanvas () {
}
}
}
Globals.js
+1 -1
View File
@@ -131,7 +131,7 @@ const EARLIEST_DATE = new Date(2014, 0, 18, 4, 26, 8);
const TOP_SPACE_HEIGHT = 5;
const BOTTOM_SPACE_HEIGHT = 35;
const BREAKPOINT_HEIGHT = 15;
const PRODUCT_CARD_STATUS = {
ON: 'on',
Panels/ProductsPanel.js
+63 -1
View File
@@ -17,9 +17,15 @@
container.isDraggeable = true
container.isWheelable = true
container.isClickeable = true
thisObject.container = container
thisObject.container.frame.containerName = "Indicators and Algobots's Products"
/* Lets listen to our own events to react when we have a Mouse Click */
thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed)
let isInitialized = false
let productCards = []
@@ -28,7 +34,14 @@
/* Needed Variables */
var lastY = 5
let lastY = 5
/* Animation to hide the pannel */
let tabStatus = 'visible'
let visiblePosition = {}
let hiddenPosition = {}
let transitionPosition = {}
return thisObject
@@ -43,6 +56,15 @@
thisObject.container.frame.position = position
visiblePosition.x = thisObject.container.frame.position.x
visiblePosition.y = thisObject.container.frame.position.y
hiddenPosition.x = thisObject.container.frame.position.x
hiddenPosition.y = viewPort.visibleArea.bottomRight.y
transitionPosition.x = visiblePosition.x
transitionPosition.y = visiblePosition.y
/* First thing is to build the productCards array */
let devTeams = ecosystem.getTeams()
@@ -113,6 +135,27 @@
isInitialized = true
}
function buttonPressed (event) {
if (tabStatus === 'visible') {
visiblePosition.x = thisObject.container.frame.position.x
visiblePosition.y = thisObject.container.frame.position.y
hiddenPosition.x = thisObject.container.frame.position.x
hiddenPosition.y = viewPort.visibleArea.bottomRight.y
transitionPosition.x = visiblePosition.x
transitionPosition.y = visiblePosition.y
container.isDraggeable = false
container.isWheelable = false
tabStatus = 'going down'
} else {
container.isDraggeable = true
container.isWheelable = true
tabStatus = 'going up'
}
}
function onMouseWheel (pDelta) {
if (pDelta > 0) {
pDelta = -1
@@ -201,6 +244,25 @@
function draw () {
if (isInitialized === false) { return }
if (tabStatus === 'going down') {
if (transitionPosition.y < hiddenPosition.y) {
transitionPosition.y = transitionPosition.y + 15
thisObject.container.frame.position.y = transitionPosition.y
} else {
thisObject.container.frame.position.y = hiddenPosition.y
tabStatus = 'hidden'
}
}
if (tabStatus === 'going up') {
if (transitionPosition.y > visiblePosition.y) {
transitionPosition.y = transitionPosition.y - 15
thisObject.container.frame.position.y = transitionPosition.y
} else {
thisObject.container.frame.position.y = visiblePosition.y
tabStatus = 'visible'
}
}
thisObject.container.frame.draw(false, false, true)
for (let i = 0; i < visibleProductCards.length; i++) {
TopSpace/CurrentBot.js
+1 -1
View File
@@ -50,7 +50,7 @@ function newCurrentBot () {
function resize () {
container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 1
container.frame.position.y = viewPort.visibleArea.bottomLeft.y
container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
}
function onDevTeamChanged () {
TopSpace/CurrentEvent.js
+1 -1
View File
@@ -122,7 +122,7 @@ function newCurrentEvent () {
function resize () {
container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 2
container.frame.position.y = viewPort.visibleArea.bottomLeft.y
container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
}
function onClick () {
TopSpace/CurrentProcess.js
+1 -1
View File
@@ -50,7 +50,7 @@ function newCurrentProcess () {
function resize () {
container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 3
container.frame.position.y = viewPort.visibleArea.bottomLeft.y
container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
}
function onUserBotChanged () {
TopSpace/CurrentStartMode.js
+1 -1
View File
@@ -35,7 +35,7 @@ function newCurrentStartMode () {
function resize () {
container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 4
container.frame.position.y = viewPort.visibleArea.bottomLeft.y
container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
}
function onClick () {
TopSpace/DevTeam.js
+1 -1
View File
@@ -56,7 +56,7 @@ function newDevTeam () {
function resize () {
container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 0
container.frame.position.y = viewPort.visibleArea.bottomLeft.y
container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
}
function onClick () {
TopSpace/EndUser.js
+1 -1
View File
@@ -15,7 +15,7 @@ function newEndUser () {
thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5
container.frame.position.y = viewPort.visibleArea.bottomLeft.y
container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
container.isDraggeable = false
TopSpace/Login.js
+1 -1
View File
@@ -15,7 +15,7 @@ function newLogin () {
thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1
container.frame.position.y = viewPort.visibleArea.bottomLeft.y
container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
container.isDraggeable = false
container.isClickeable = true