Drag and Drop of files implemented

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 () {
     }
   }
 }
-

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()

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 () {
     }
   }
 }
-