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

Drag with snapping

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2019-05-10 12:38:59 +02:00
1 parent 6fde43db50
commit 38ec00be86
4 files changed
+86 -69
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Canvas.js
+42 -39
View File
@@ -171,14 +171,15 @@ function newCanvas () {
animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded)
animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded)
animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded)
animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded)
animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded)
animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded)
animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded)
animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded)
animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded)
animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded)
animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded)
animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded)
animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded)
animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded)
animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded)
animation.start(onStart)
function onFunctionAdded (err) {
@@ -358,6 +359,21 @@ function newCanvas () {
return
}
/* we check if it is over any of the existing containers at the Chart Space. */
container = thisObject.chartSpace.getContainer(point)
if (container !== undefined) {
if (container.isDraggeable === true) {
containerBeingDragged = container
containerDragStarted = true
return
} else {
viewPortBeingDragged = true
return
}
}
container = thisObject.floatingSpace.getContainer(point)
if (container !== undefined && container.isDraggeable === true) {
@@ -371,18 +387,6 @@ function newCanvas () {
/* We dont want to mess up with the click */
return
}
/* we check if it is over any of the existing containers at the Chart Space. */
container = thisObject.chartSpace.getContainer(point)
if (container !== undefined && container.isDraggeable === true) {
containerBeingDragged = container
containerDragStarted = true
return
}
viewPortBeingDragged = true
} catch (err) {
if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) }
}
@@ -439,17 +443,17 @@ function newCanvas () {
return
}
/* We check if the mouse is over a floatingObject/ */
container = thisObject.floatingSpace.getContainer(point)
/* 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)
if (container !== undefined && container.isClickeable === true) {
container.eventHandler.raiseEvent('onMouseClick', point)
return
}
/* 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)
/* We check if the mouse is over a floatingObject/ */
container = thisObject.floatingSpace.getContainer(point)
if (container !== undefined && container.isClickeable === true) {
container.eventHandler.raiseEvent('onMouseClick', point)
@@ -592,9 +596,10 @@ function newCanvas () {
}
}
/* We check if the mouse is over a floatingObject/ */
if (thisObject.floatingSpace !== undefined) {
container = thisObject.floatingSpace.getContainer(point)
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
if (thisObject.chartSpace !== undefined) {
container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
if (container !== undefined && container.detectMouseOver === true) {
containerFound()
@@ -602,10 +607,9 @@ function newCanvas () {
}
}
/* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
if (thisObject.chartSpace !== undefined) {
container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
/* We check if the mouse is over a floatingObject/ */
if (thisObject.floatingSpace !== undefined) {
container = thisObject.floatingSpace.getContainer(point)
if (container !== undefined && container.detectMouseOver === true) {
containerFound()
@@ -647,15 +651,6 @@ function newCanvas () {
let container
container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y })
if (container !== undefined && container.isWheelable === true) {
container.eventHandler.raiseEvent('onMouseWheel', event)
return false // This instructs the browser not to take the event and scroll the page.
}
/* We try second with floating objects. */
container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y })
if (container !== undefined && container.isWheelable === true) {
container.eventHandler.raiseEvent('onMouseWheel', event)
return false // This instructs the browser not to take the event and scroll the page.
@@ -670,9 +665,17 @@ function newCanvas () {
return false // This instructs the browser not to take the event and scroll the page.
}
/* Finally we try the Chart Space. */
/* Chart Space. */
container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
if (container !== undefined && container.isWheelable === true) {
container.eventHandler.raiseEvent('onMouseWheel', event)
return false // This instructs the browser not to take the event and scroll the page.
}
/* We try second with floating objects. */
container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y })
if (container !== undefined && container.isWheelable === true) {
container.eventHandler.raiseEvent('onMouseWheel', event)
Spaces/BottomSpace.js
+8 -13
View File
@@ -57,22 +57,17 @@
function physics () {
/* Check the limits */
if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) {
if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) {
thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT
canvas.strategySpace.makeInvisible()
}
if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) {
thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT
canvas.chartSpace.visible = false
canvas.panelsSpace.visible = false
}
if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) {
} else {
canvas.strategySpace.makeVisible()
}
if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) {
canvas.chartSpace.visible = true
if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) {
thisObject.container.frame.position.y = 0
canvas.panelsSpace.visible = false
} else {
canvas.panelsSpace.visible = true
}
@@ -188,7 +183,7 @@
browserCanvasContext.beginPath()
browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height)
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')'
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
browserCanvasContext.closePath()
browserCanvasContext.fill()
@@ -199,7 +194,7 @@
browserCanvasContext.fill()
browserCanvasContext.beginPath()
browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT)
browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT)
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
browserCanvasContext.closePath()
browserCanvasContext.fill()
Spaces/ChartSpace.js
+19 -1
View File
@@ -17,6 +17,7 @@ function newChartSpace () {
visible: true,
container: undefined,
fitIntoVisibleArea: fitIntoVisibleArea,
physics: physics,
drawBackground: drawBackground,
draw: draw,
timeMachines: [],
@@ -104,6 +105,18 @@ function newChartSpace () {
return point
}
function physics () {
thisObject.container.frame.height = BOTTOM_SPACE_POSITION
if (thisObject.container.frame.height <= 0 / 100) {
thisObject.visible = false
} else {
thisObject.visible = true
}
viewPort.resize()
}
function drawBackground () {
if (thisObject.visible !== true) { return }
@@ -158,7 +171,12 @@ function newChartSpace () {
}
}
}
return this.container
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
return thisObject.container
} else {
return undefined
}
}
}
TimeMachine.js
+17 -16
View File
@@ -1,4 +1,4 @@
/*
/*
Markets are a function of time. When watching them, end users must be positioned at one particular point in time. The system currently allows users
to position themselves at any time they like.
@@ -37,7 +37,7 @@ function newTimeMachine () {
thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it...
// ... also to request a reference to the object for the cases we need it.
// ... also to request a reference to the object for the cases we need it.
const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
let timeScale
@@ -63,7 +63,7 @@ function newTimeMachine () {
function initialize (callBackFunction) {
if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
/* Each Time Machine has a Control Panel. */
/* Each Time Machine has a Control Panel. */
let panelOwner = 'Global'
controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner)
@@ -76,7 +76,7 @@ function newTimeMachine () {
moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition)
})
/* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
/* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
let position = 0 // This defines the position of each chart respect to each other.
@@ -103,7 +103,7 @@ function newTimeMachine () {
controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined)
timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime)
/* Each Time Machine has a Time Scale and a Right Scale. */
/* Each Time Machine has a Time Scale and a Right Scale. */
timeScale = newTimeScale()
timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
@@ -143,10 +143,10 @@ function newTimeMachine () {
let market = SUPPORTED_MARKETS[j]
if (
exchange === DEFAULT_EXCHANGE &&
market.assetA === DEFAULT_MARKET.assetA &&
market.assetB === DEFAULT_MARKET.assetB
) { continue }
exchange === DEFAULT_EXCHANGE &&
market.assetA === DEFAULT_MARKET.assetA &&
market.assetB === DEFAULT_MARKET.assetB
) { continue }
initializeTimelineChart(exchange, market)
}
@@ -203,7 +203,7 @@ function newTimeMachine () {
if (timeScale !== undefined) { timeScale.draw() }
if (rigthScale !== undefined) { rigthScale.draw() }
// thisObject.container.frame.draw(false, true, false)
// thisObject.container.frame.draw(false, true, false)
}
}
@@ -237,7 +237,7 @@ function newTimeMachine () {
}
}
if (thisObject.container.frame.isThisPointHere(point) === true) {
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
return thisObject.container
} else {
if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) {
@@ -261,10 +261,11 @@ function newTimeMachine () {
}
timeLineCoordinateSystem.initialize(
minValue,
maxValue,
thisObject.container.frame.width,
thisObject.container.frame.height
)
minValue,
maxValue,
thisObject.container.frame.width,
thisObject.container.frame.height
)
}
}