diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 5d2a5db81..d69ea61a4 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,189 +1,757 @@ -/* -The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of -charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine -changes, then all charts in it are replotted with the corresponging data. +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. +let marketInitializationCounter = 0 // This counter the initialization of markets required to be able to turn off the splash screen. +let splashScreenNeeded = true -function newChartSpace () { - const MODULE_NAME = 'Chart Space' +function newCanvas () { + const MODULE_NAME = 'Canvas' const INFO_LOG = false const ERROR_LOG = true + const INTENSIVE_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME + /* Mouse event related variables. */ + + let containerDragStarted = false + let floatingObjectDragStarted = false + let floatingObjectBeingDragged + let containerBeingDragged + let viewPortBeingDragged = false + let ignoreNextClick = false + + let dragVector = { + downX: 0, + downY: 0, + upX: 0, + upY: 0 + } + + /* canvas object */ + let thisObject = { - visible: true, - container: undefined, - fitIntoVisibleArea: fitIntoVisibleArea, - physics: physics, - drawBackground: drawBackground, - draw: draw, - timeMachines: [], - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + eventHandler: undefined, + topSpace: undefined, + chartSpace: undefined, + floatingSpace: undefined, + panelsSpace: undefined, + bottomSpace: undefined, + strategySpace: undefined, + animation: undefined, initialize: initialize, finalize: finalize } - thisObject.container = newContainer() - thisObject.container.initialize(MODULE_NAME) - - thisObject.container.isDraggeable = false - thisObject.container.isWheelable = false + thisObject.eventHandler = newEventHandler() + let splashScreen + let lastContainerMouseOver return thisObject +/* + The canvas object represents a layer on top of the browser canvas object. + + Graphically, thiscanvas object has 5 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 UIControls that other panels can add there. + 6. The "Strategy Spece": Functionality to manage Strategies + + All these spaces are child objects of the Canvas object. + + Canvas + | + | + ---> topSpace + | + | + ---> chartSpace + | + | + ---> flaotingSpace + | + | + ---> panelsSpace + | + | + ---> bottomSpace + | + | + ---> strategySpace +*/ + function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.finalize() + thisObject.chartSpace.finalize() + thisObject.floatingSpace.finalize() + + browserCanvas.removeEventListener('mousedown', onMouseDown, false) + browserCanvas.removeEventListener('mouseup', onMouseUp, false) + browserCanvas.removeEventListener('mousemove', onMouseMove, false) + browserCanvas.removeEventListener('click', onMouseClick, false) + + /* Mouse wheel events. */ + + if (browserCanvas.removeEventListener) { + // IE9, Chrome, Safari, Opera + browserCanvas.removeEventListener('mousewheel', onMouseWheel, false) + // Firefox + browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false) } + // IE 6/7/8 + else browserCanvas.detachEvent('onmousewheel', onMouseWheel) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } - function initialize (callBackFunction) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + async function initialize (callBackFunction) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - let initializedCounter = 0 - let toInitialize = 1 + initializeBrowserCanvas() - /* We create the first of many possible time machines that could live at the Chart Space. */ + addCanvasEvents() - let timeMachine = newTimeMachine() + /* Instantiate all the children spaces of Canvas object */ - /* We make the time machine a little bit smaller than the current space. */ + thisObject.topSpace = newTopSpace() + await thisObject.topSpace.initialize() - timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 - timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 + thisObject.strategySpace = newStrategySpace() + await thisObject.strategySpace.initialize() - timeMachine.initialize(onTimeMachineInitialized) + thisObject.bottomSpace = newBottomSpace() + thisObject.bottomSpace.initialize() - function onTimeMachineInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') } + thisObject.panelsSpace = newPanelsSpace() + thisObject.panelsSpace.initialize() - initializedCounter++ + thisObject.floatingSpace = newFloatingSpace() + thisObject.floatingSpace.initialize() - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') } + thisObject.chartSpace = newChartSpace() + thisObject.chartSpace.initialize(onCharSpaceInitialized) - callBackFunction(err) + function onCharSpaceInitialized (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } + + viewPort.raiseEvents() // These events will impacts on objects just initialized. + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + /* Splash Screen */ + + splashScreen = newSplashScreen() + splashScreen.initialize() + + let animation = newAnimation() + animation.initialize(onAnimationInitialized) + + function onAnimationInitialized (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> Entering function.') } + + thisObject.animation = animation + + /* Here we add all the functions that will be called during the animation cycle. */ + + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) + 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 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('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) + animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) + animation.start(onStart) + + function onFunctionAdded (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onFunctionAdded -> Entering function.') } + + if (err.result === GLOBAL.DEFAULT_FAIL_RESPONSE.result) { + animation.stop() + + 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. */ + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function onStart (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Entering function.') } + + switch (err.result) { + case GLOBAL.DEFAULT_OK_RESPONSE.result: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received OK Response.') } + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + return + } + + case GLOBAL.DEFAULT_FAIL_RESPONSE.result: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received FAIL Response.') } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + return + } + + default: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received Unexpected Response.') } + callBackFunction(err) + return + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function initializeBrowserCanvas () { + try { + if (INFO_LOG === true) { logger.write('[INFO] initializeBrowserCanvas -> Entering function.') } + + browserCanvasContext = browserCanvas.getContext('2d') + // browserCanvasContext.font = 'italic small-caps bold 12px Saira' + browserCanvasContext.font = 'Saira' + + viewPort.initialize() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) } + } + } + + function addCanvasEvents () { + try { + if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') } + + /* 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. */ + + if (browserCanvas.addEventListener) { + // IE9, Chrome, Safari, Opera + browserCanvas.addEventListener('mousewheel', onMouseWheel, false) + // Firefox + browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false) + } + // 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.stack) } + } + } + + function onMouseDown (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') } + + /* + + There are four types of elements that can be dragged. + + 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. + + */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + dragVector.downX = point.x + dragVector.downY = point.y + + let container + + /* We check if the mouse is over an element of the Strategy Space / */ + + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true return } - thisObject.timeMachines.push(timeMachine) - - if (initializedCounter === toInitialize) { - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + if (container !== undefined && container.isDraggeable === false) { + return } - } - } - function getContainer (point, purpose) { - if (thisObject.visible !== true) { return } + /* We check if the mouse is over an element of the Top Space / */ - let container + container = thisObject.topSpace.getContainer(point) - /* Now we see which is the inner most container that has it */ + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } + + /* We check if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true && event.button === 2) { + containerBeingDragged = container + containerDragStarted = true + return + } + + if (container !== undefined && container.isClickeable === true) { + /* 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) - for (let i = 0; i < thisObject.timeMachines.length; i++) { - container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { - if (container.isForThisPurpose(purpose)) { - return container + if (container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } else { + viewPortBeingDragged = true + return } } - } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } - } + container = thisObject.floatingSpace.getContainer(point) - function fitIntoVisibleArea (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - - let returnPoint = { - x: point.x, - y: point.y - } - - if (point.x > browserCanvas.width) { - returnPoint.x = browserCanvas.width - } - - if (point.x < 0) { - returnPoint.x = 0 - } - - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 - } - - if (point.y < 0) { - returnPoint.y = 0 - } - - return returnPoint - } - - 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 } - - drawSpaceBackground() - - if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.drawBackground() + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + floatingObjectDragStarted = true + return } + + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } } - function drawSpaceBackground () { - let opacity = '1' - let fromPoint = { - x: 0, - y: 0 - } + function onMouseClick (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') } - let toPoint = { - x: browserCanvas.width, - y: BOTTOM_SPACE_POSITION - } + if (ignoreNextClick === true) { + ignoreNextClick = false + return + } + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } - browserCanvasContext.beginPath() - browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() + let container + + /* We check if the mouse is over an element of the Strategy Space / */ + + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over an element of the Top Space / */ + + container = thisObject.topSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.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) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* 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) + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) } + } } - function draw () { - if (thisObject.visible !== true) { return } + function onMouseUp (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.draw() + if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) { + thisObject.eventHandler.raiseEvent('Drag Finished', undefined) + } + + if ( + containerDragStarted || + floatingObjectDragStarted || + viewPortBeingDragged + ) { + ignoreNextClick = true + } + /* Turn off all the possible things that can be dragged. */ + + containerDragStarted = false + floatingObjectDragStarted = false + viewPortBeingDragged = false + + containerBeingDragged = undefined + + browserCanvas.style.cursor = 'auto' + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } + } + } + + function onMouseMove (event) { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') } + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + viewPort.mousePosition.x = point.x + viewPort.mousePosition.y = point.y + + if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { + if (floatingObjectDragStarted === true) { + let targetContainer = thisObject.floatingSpace.getContainer(point) + if (targetContainer !== undefined) { + if (targetContainer.id !== containerBeingDragged.id) { + containerBeingDragged = undefined + containerDragStarted = false + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } else { + containerDragStarted = false + containerBeingDragged = undefined + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } + + dragVector.upX = point.x + dragVector.upY = point.y + + checkDrag(event) + } else { + onMouseOver(event) + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) } + } + } + + function onMouseOver (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } + + /* Then we check who is the current object underneeth the mounse. */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + let container + + /* We check if the mouse is over an element of the Strategy Space / */ + + if (thisObject.strategySpace !== undefined) { + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over an element of the Top Space / */ + + if (thisObject.topSpace !== undefined) { + container = thisObject.topSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + if (thisObject.bottomSpace !== undefined) { + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over a panel/ */ + + if (thisObject.panelsSpace !== undefined) { + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* 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() + return + } + } + + /* 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() + return + } + } + + function containerFound () { + if (lastContainerMouseOver !== undefined) { + if (container.id !== lastContainerMouseOver.id) { + lastContainerMouseOver.eventHandler.raiseEvent('onMouseNotOver', point) + } + } + + container.eventHandler.raiseEvent('onMouseOver', point) + lastContainerMouseOver = container + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } + } + } + + function onMouseWheel (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') } + + // 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. */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + event.mousePosition = point + 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 the Bottom Space. */ + + container = canvas.bottomSpace.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. + } + + /* 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. + } + + if (container !== undefined) { + viewPort.applyZoom(delta) + return false + } + + /* 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. + } + + return false + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } + } + } + + function checkDrag (event) { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') } + + if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + browserCanvas.style.cursor = 'grabbing' + thisObject.eventHandler.raiseEvent('Dragging', undefined) + + if (containerDragStarted || viewPortBeingDragged) { + /* 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, + y: dragVector.downY + } + + let downCopyNoTransf + downCopyNoTransf = viewPort.unzoomThisPoint(downCopy) + // downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf); + + let upCopy = { + x: dragVector.upX, + y: dragVector.upY + } + + let upCopyNoTranf + upCopyNoTranf = viewPort.unzoomThisPoint(upCopy) + + let displaceVector = { + x: dragVector.upX - dragVector.downX, + y: dragVector.upY - dragVector.downY + } + + if (viewPortBeingDragged) { + viewPort.displace(displaceVector) + } + + if (containerBeingDragged !== undefined) { + if (containerBeingDragged.notDraggingOnX === false) { + containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x + } + if (containerBeingDragged.notDraggingOnY === false) { + containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y + } + } + } + + /* Finally we set the starting point of the new dragVector at this current point. */ + + dragVector.downX = dragVector.upX + dragVector.downY = dragVector.upY + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) } } } }