From 88fe045281bc49dc9f13ca98b826dc0f57158c23 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 23 May 2019 16:34:59 +0200 Subject: [PATCH] Drag and Drop of files implemented --- Canvas.js | 162 ++++++++++++++++++++++++------------- Spaces/CockpitSpace.js | 10 +++ StrategySpace/Workspace.js | 7 +- 3 files changed, 121 insertions(+), 58 deletions(-) diff --git a/Canvas.js b/Canvas.js index eca8cf0d9..a8751bdf4 100644 --- a/Canvas.js +++ b/Canvas.js @@ -60,16 +60,15 @@ function newCanvas () { browserCanvas.removeEventListener('click', onMouseClick, false) browserCanvas.removeEventListener('mouseout', onMouseOut, 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) + browserCanvas.removeEventListener('mousewheel', onMouseWheel, false)// IE9, Chrome, Safari, Opera + browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false) // Firefox + } else browserCanvas.detachEvent('onmousewheel', onMouseWheel) // IE 6/7/8 + + browserCanvas.removeEventListener('dragenter', onDragEnter, false) + browserCanvas.removeEventListener('dragleave', onDragLeave, false) + browserCanvas.removeEventListener('dragover', onDragOver, false) + browserCanvas.removeEventListener('drop', onDragDrop, false) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } @@ -110,9 +109,6 @@ function newCanvas () { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } } } - - /* Splash Screen */ - splashScreen = newSplashScreen() splashScreen.initialize() @@ -121,8 +117,6 @@ function newCanvas () { 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) animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground) @@ -144,7 +138,6 @@ function newCanvas () { function initializeBrowserCanvas () { try { browserCanvasContext = browserCanvas.getContext('2d') - // browserCanvasContext.font = 'italic small-caps bold 12px Saira' browserCanvasContext.font = 'Saira' viewPort.initialize() @@ -155,24 +148,23 @@ function newCanvas () { function addCanvasEvents () { try { - /* 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) browserCanvas.addEventListener('mouseout', onMouseOut, 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) + browserCanvas.addEventListener('mousewheel', onMouseWheel, false) // IE9, Chrome, Safari, Opera + browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false) // Firefox + } else browserCanvas.attachEvent('onmousewheel', onMouseWheel)// IE 6/7/8 + + /* Dragging Files Over the Canvas */ + + browserCanvas.addEventListener('dragenter', onDragEnter, false) + browserCanvas.addEventListener('dragleave', onDragLeave, false) + browserCanvas.addEventListener('dragover', onDragOver, false) + browserCanvas.addEventListener('drop', onDragDrop, false) // Disables the context menu when you right mouse click the canvas. browserCanvas.oncontextmenu = function (e) { @@ -183,6 +175,63 @@ function newCanvas () { } } + function onDragEnter (event) { + try { + event.preventDefault() + event.stopPropagation() + thisObject.cockpitSpace.toTop() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onDragEnter -> err = ' + err.stack) } + } + } + + function onDragLeave (event) { + try { + event.preventDefault() + event.stopPropagation() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onDragLeave -> err = ' + err.stack) } + } + } + + function onDragOver (event) { + try { + event.preventDefault() + event.stopPropagation() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onDragOver -> err = ' + err.stack) } + } + } + + function onDragDrop (event) { + try { + event.preventDefault() + event.stopPropagation() + console.log(event) + + let files = event.dataTransfer.files + + handleFiles(files) + function handleFiles (files) { + ([...files]).forEach(loadFileData) + } + + function loadFileData (file) { + let reader = new FileReader() + reader.readAsText(file) + reader.onloadend = function () { + let mousePosition = { + x: event.x, + y: event.y + } + thisObject.strategySpace.spawn(reader.result, mousePosition) + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onDragDrop -> err = ' + err.stack) } + } + } + function onMouseDown (event) { try { let point = { @@ -373,36 +422,6 @@ function newCanvas () { deactivateDragging(event) } - function deactivateDragging (event) { - try { - 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 - - if (containerBeingDragged !== undefined) { - containerBeingDragged.eventHandler.raiseEvent('onDragFinished', event) - containerBeingDragged = undefined - } - - browserCanvas.style.cursor = 'auto' - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } - } - } - function onMouseMove (event) { try { let point = { @@ -599,6 +618,36 @@ function newCanvas () { } } + function deactivateDragging (event) { + try { + 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 + + if (containerBeingDragged !== undefined) { + containerBeingDragged.eventHandler.raiseEvent('onDragFinished', event) + containerBeingDragged = undefined + } + + browserCanvas.style.cursor = 'auto' + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] deactivateDragging -> err = ' + err.stack) } + } + } + function checkDrag (event) { try { if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { @@ -657,4 +706,3 @@ function newCanvas () { } } } - diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index afff50bad..92cb0e922 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -8,6 +8,8 @@ assetBalances: undefined, restartSimulation: undefined, fullscreen: undefined, + toTop: toTop, + toBottom: toBottom, draw: draw, physics: physics, getContainer: getContainer, @@ -76,6 +78,14 @@ thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT } + function toTop () { + thisObject.container.frame.position.y = 0 + } + + function toBottom () { + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT + } + function physics () { thisObjectPhysics() childrenPhysics() diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 3ad5e8b68..ba68cb819 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -5,6 +5,7 @@ function newWorkspace () { let thisObject = { tradingSystem: undefined, container: undefined, + spawn: spawn, detachNode: detachNode, attachNode: attachNode, getContainer: getContainer, @@ -45,6 +46,11 @@ function newWorkspace () { } + function spawn (nodeText, point) { + let dirtyNode = JSON.parse(nodeText) + let node = getProtocolNode(dirtyNode) + } + function detachNode (node) { switch (node.type) { case 'Trading System': { @@ -753,4 +759,3 @@ function newWorkspace () { } } } -