308 lines
9.2 KiB
JavaScript
308 lines
9.2 KiB
JavaScript
|
|
function newBottomSpace () {
|
|
const MODULE_NAME = 'Bottom Space'
|
|
const ERROR_LOG = true
|
|
|
|
let thisObject = {
|
|
container: undefined,
|
|
status: 'BOTTOM',
|
|
draw: draw,
|
|
physics: physics,
|
|
getContainer: getContainer, // returns the inner most container that holds the point received by parameter.
|
|
createNewControl: createNewControl,
|
|
destroyControl: destroyControl,
|
|
getControl: getControl,
|
|
finalize: finalize,
|
|
initialize: initialize
|
|
}
|
|
|
|
thisObject.container = newContainer()
|
|
thisObject.container.initialize(MODULE_NAME)
|
|
thisObject.container.isClickeable = false
|
|
thisObject.container.isDraggeable = true
|
|
thisObject.container.notDraggingOnX = true
|
|
|
|
controlsMap = new Map()
|
|
resize()
|
|
|
|
let selfMouseClickEventSubscriptionId
|
|
let canvasBrowserResizedEventSubscriptionId
|
|
|
|
return thisObject
|
|
|
|
function finalize () {
|
|
thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
|
|
thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId)
|
|
|
|
thisObject.container.finalize()
|
|
thisObject.container = undefined
|
|
}
|
|
|
|
function initialize () {
|
|
canvasBrowserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
|
|
selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
|
|
}
|
|
|
|
function onMouseClick (event) {
|
|
// canvas.strategySpace.tradingSystemWorkspace.showUp()
|
|
}
|
|
|
|
function resize () {
|
|
thisObject.container.frame.position.x = 0
|
|
thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT
|
|
|
|
thisObject.container.frame.width = browserCanvas.width
|
|
thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
|
|
}
|
|
|
|
function physics () {
|
|
/* Check the limits */
|
|
|
|
thisObject.status = 'MIDDLE'
|
|
|
|
let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE)
|
|
if (user !== null) { // Only if user is logged in
|
|
thisObject.container.isDraggeable = true
|
|
} else {
|
|
thisObject.container.isDraggeable = false
|
|
}
|
|
|
|
if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) {
|
|
thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT
|
|
thisObject.status = 'BOTTOM'
|
|
canvas.strategySpace.makeInvisible()
|
|
} else {
|
|
canvas.strategySpace.makeVisible()
|
|
}
|
|
|
|
if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) {
|
|
thisObject.container.frame.position.y = 0
|
|
thisObject.status = 'TOP'
|
|
canvas.panelsSpace.visible = false
|
|
} else {
|
|
canvas.panelsSpace.visible = true
|
|
}
|
|
|
|
BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y
|
|
viewPort.resize()
|
|
}
|
|
|
|
function createNewControl (pType, pDrawFunction, pOwner) {
|
|
let control
|
|
|
|
switch (pType) {
|
|
|
|
case 'Over The Line':
|
|
{
|
|
control = newUIControl()
|
|
control.initialize()
|
|
control.drawFunction = pDrawFunction
|
|
break
|
|
}
|
|
}
|
|
|
|
let controlArray = controlsMap.get(pOwner)
|
|
if (controlArray === undefined) {
|
|
controlArray = []
|
|
controlsMap.set(pOwner, controlArray)
|
|
}
|
|
|
|
controlArray.push(control)
|
|
|
|
control.handle = Math.floor((Math.random() * 10000000) + 1)
|
|
|
|
return control.handle
|
|
}
|
|
|
|
function destroyControl (pControlHandle) {
|
|
thisObject.controls = controlsMap.get('Global')
|
|
if (thisObject.controls !== undefined) {
|
|
for (let i = 0; i < thisObject.controls.length; i++) {
|
|
let control = thisObject.controls[i]
|
|
if (control.handle === pControlHandle) {
|
|
thisObject.controls.splice(i, 1) // Delete item from array.
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS)
|
|
if (thisObject.controls !== undefined) {
|
|
for (let i = 0; i < thisObject.controls.length; i++) {
|
|
let control = thisObject.controls[i]
|
|
if (control.handle === pControlHandle) {
|
|
thisObject.controls.splice(i, 1) // Delete item from array.
|
|
return
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function getControl (pControlHandle, pOwner) {
|
|
thisObject.controls = controlsMap.get(pOwner)
|
|
if (thisObject.controls != undefined) {
|
|
for (let i = 0; i < thisObject.controls.length; i++) {
|
|
let control = thisObject.controls[i]
|
|
|
|
if (control.handle === pControlHandle) {
|
|
return control
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function getContainer (point) {
|
|
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
|
|
return thisObject.container
|
|
} else {
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
function draw () {
|
|
thisObject.container.frame.draw(false, false)
|
|
|
|
drawBackground()
|
|
|
|
thisObject.controls = controlsMap.get('Global')
|
|
if (thisObject.controls !== undefined) {
|
|
for (let i = 0; i < thisObject.controls.length; i++) {
|
|
let control = thisObject.controls[i]
|
|
control.draw()
|
|
}
|
|
}
|
|
|
|
thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS)
|
|
if (thisObject.controls !== undefined) {
|
|
for (let i = 0; i < thisObject.controls.length; i++) {
|
|
let control = thisObject.controls[i]
|
|
control.draw()
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawBackground () {
|
|
let opacity = 1
|
|
|
|
let zeroPoint = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
|
|
const RED_LINE_HIGHT = 5
|
|
|
|
zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint)
|
|
|
|
browserCanvasContext.beginPath()
|
|
browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height)
|
|
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
|
|
browserCanvasContext.closePath()
|
|
browserCanvasContext.fill()
|
|
|
|
browserCanvasContext.beginPath()
|
|
browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT)
|
|
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
|
|
browserCanvasContext.closePath()
|
|
browserCanvasContext.fill()
|
|
|
|
browserCanvasContext.beginPath()
|
|
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()
|
|
|
|
let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE)
|
|
if (user !== null) { // Only if user is logged in
|
|
arrow()
|
|
}
|
|
}
|
|
|
|
function arrow () {
|
|
const X_OFFSET = thisObject.container.frame.width / 2
|
|
const Y_OFFSET = thisObject.container.frame.height / 2
|
|
const HEIGHT = 6
|
|
const WIDTH = 18
|
|
const LINE_WIDTH = 3
|
|
const OPACITY = 1
|
|
let DISTANCE_BETWEEN_ARROWS = 0
|
|
let ARROW_1_DIRECTION = 0
|
|
let ARROW_2_DIRECTION = 0
|
|
|
|
switch (thisObject.status) {
|
|
|
|
case ('TOP'): {
|
|
ARROW_1_DIRECTION = -1
|
|
ARROW_2_DIRECTION = -1
|
|
DISTANCE_BETWEEN_ARROWS = 6
|
|
break
|
|
}
|
|
case ('MIDDLE'): {
|
|
ARROW_1_DIRECTION = 1
|
|
ARROW_2_DIRECTION = -1
|
|
DISTANCE_BETWEEN_ARROWS = 9
|
|
break
|
|
}
|
|
case ('BOTTOM'): {
|
|
ARROW_1_DIRECTION = 1
|
|
ARROW_2_DIRECTION = 1
|
|
DISTANCE_BETWEEN_ARROWS = 6
|
|
break
|
|
}
|
|
}
|
|
|
|
point1 = {
|
|
x: X_OFFSET - WIDTH / 2,
|
|
y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
|
|
}
|
|
|
|
point2 = {
|
|
x: X_OFFSET,
|
|
y: Y_OFFSET - HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
|
|
}
|
|
|
|
point3 = {
|
|
x: X_OFFSET + WIDTH / 2,
|
|
y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
|
|
}
|
|
|
|
point1 = thisObject.container.frame.frameThisPoint(point1)
|
|
point2 = thisObject.container.frame.frameThisPoint(point2)
|
|
point3 = thisObject.container.frame.frameThisPoint(point3)
|
|
|
|
point4 = {
|
|
x: X_OFFSET - WIDTH / 2,
|
|
y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
|
|
}
|
|
|
|
point5 = {
|
|
x: X_OFFSET,
|
|
y: Y_OFFSET - HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
|
|
}
|
|
|
|
point6 = {
|
|
x: X_OFFSET + WIDTH / 2,
|
|
y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
|
|
}
|
|
|
|
point4 = thisObject.container.frame.frameThisPoint(point4)
|
|
point5 = thisObject.container.frame.frameThisPoint(point5)
|
|
point6 = thisObject.container.frame.frameThisPoint(point6)
|
|
|
|
browserCanvasContext.setLineDash([0, 0])
|
|
|
|
browserCanvasContext.beginPath()
|
|
|
|
browserCanvasContext.moveTo(point1.x, point1.y)
|
|
browserCanvasContext.lineTo(point2.x, point2.y)
|
|
browserCanvasContext.lineTo(point3.x, point3.y)
|
|
|
|
browserCanvasContext.moveTo(point4.x, point4.y)
|
|
browserCanvasContext.lineTo(point5.x, point5.y)
|
|
browserCanvasContext.lineTo(point6.x, point6.y)
|
|
|
|
browserCanvasContext.lineWidth = LINE_WIDTH
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
|
|
browserCanvasContext.stroke()
|
|
}
|
|
}
|