Dragging working with containers

Canvas.js

@@ -357,16 +357,21 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over a floatingObject/ */
+      container = thisObject.floatingSpace.getContainer(point)
 
-      floatingObjectBeingDragged = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-      if (floatingObjectBeingDragged >= 0) {
+      if (container !== undefined && container.isDraggeable === true) {
+        containerBeingDragged = container
+        containerDragStarted = true
         floatingObjectDragStarted = true
         return
       }
 
-           /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
+      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)
 
@@ -497,12 +502,22 @@ function newCanvas () {
 
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
         if (floatingObjectDragStarted === true) {
-          if (thisObject.floatingSpace.floatingLayer.isInsideFloatingObject(floatingObjectBeingDragged, point.x, point.y) === false) {
-                       /* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer.
-                       In this case we cancell the drag operation . */
-
+          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
           }
         }
@@ -582,12 +597,10 @@ function newCanvas () {
 
            /* We check if the mouse is over a floatingObject/ */
       if (thisObject.floatingSpace !== undefined) {
-        let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-        if (floatingObjectBeingClicked >= 0) {
-          let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked)
-          floatingObject.container.eventHandler.raiseEvent('onMouseOver', point)
+        container = thisObject.floatingSpace.getContainer(point)
 
+        if (container !== undefined && container.detectMouseOver === true) {
+          container.eventHandler.raiseEvent('onMouseOver', point)
           return
         }
       }
@@ -680,15 +693,6 @@ function newCanvas () {
         browserCanvas.style.cursor = 'grabbing'
         thisObject.eventHandler.raiseEvent('Dragging', undefined)
 
-        let targetFloatingObject = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-        if (floatingObjectDragStarted) {
-          let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged)
-
-          floatingObject.container.frame.position.x = dragVector.upX
-          floatingObject.container.frame.position.y = dragVector.upY
-        }
-
         if (containerDragStarted || viewPortBeingDragged) {
                    /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */
 
@@ -734,3 +738,4 @@ function newCanvas () {
     }
   }
 }
+

Container.js

@@ -1,6 +1,7 @@
 
 function newContainer () {
   let thisObject = {
+    id: Math.trunc(Math.random() * 10000000),
     frame: undefined,
     displacement: undefined,
     eventHandler: undefined,

FloatingSpace/FloatingLayer.js

@@ -660,8 +660,6 @@ function newFloatingLayer () {
               break  // only one at the time.
             }
           }
-
-          drawDyingObjects()
         } catch (err) {
           if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) }
         }

FloatingSpace/FloatingObject.js

@@ -58,10 +58,10 @@ function newFloatingObject () {
   }
 
   thisObject.container = newContainer()
-  thisObject.container.name = MODULE_NAME
-  thisObject.container.initialize('Circle')
+  thisObject.container.initialize(MODULE_NAME, 'Circle')
   thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
+  thisObject.container.isDraggeable = true
+  thisObject.container.detectMouseOver = true
   thisObject.container.frame.radius = 0
   thisObject.container.frame.position.x = 0
   thisObject.container.frame.position.y = 0

FloatingSpace/Note.js

@@ -4,7 +4,7 @@ function newNote () {
 
   let thisObject = {
     container: undefined,
-    physicsLoop: physicsLoop,
+    physics: physics,
     drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
@@ -12,9 +12,8 @@ function newNote () {
   }
 
   thisObject.container = newContainer()
-  thisObject.container.name = MODULE_NAME
-  thisObject.container.initialize('Circle')
-  thisObject.container.isClickeable = true
+  thisObject.container.initialize(MODULE_NAME, 'Circle')
+  thisObject.container.isClickeable = false
   thisObject.container.isDraggeable = false
   thisObject.container.frame.radius = 0
   thisObject.container.frame.position.x = 0
@@ -38,7 +37,7 @@ function newNote () {
     }
   }
 
-  function physicsLoop () {
+  function physics () {
 
   }
 

FloatingSpace/ProfileBall.js

@@ -4,7 +4,7 @@ function newProfileBall () {
 
   let thisObject = {
     container: undefined,
-    physicsLoop: physicsLoop,
+    physics: physics,
     drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
@@ -12,9 +12,8 @@ function newProfileBall () {
   }
 
   thisObject.container = newContainer()
-  thisObject.container.name = MODULE_NAME
-  thisObject.container.initialize('Circle')
-  thisObject.container.isClickeable = true
+  thisObject.container.initialize(MODULE_NAME, 'Circle')
+  thisObject.container.isClickeable = false
   thisObject.container.isDraggeable = false
   thisObject.container.frame.radius = 0
   thisObject.container.frame.position.x = 0
@@ -93,7 +92,7 @@ function newProfileBall () {
     }
   }
 
-  function physicsLoop () {
+  function physics () {
         // The menuItems also have a target.
 
     for (let i = 0; i < ballStringMenu.length; i++) {

FloatingSpace/StrategyPart.js

@@ -5,7 +5,7 @@ function newStrategyPart () {
   let thisObject = {
     type: undefined,
     container: undefined,
-    physicsLoop: physicsLoop,
+    physics: physics,
     drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
@@ -13,9 +13,8 @@ function newStrategyPart () {
   }
 
   thisObject.container = newContainer()
-  thisObject.container.name = MODULE_NAME
-  thisObject.container.initialize('Circle')
-  thisObject.container.isClickeable = true
+  thisObject.container.initialize(MODULE_NAME, 'Circle')
+  thisObject.container.isClickeable = false
   thisObject.container.isDraggeable = false
   thisObject.container.frame.radius = 0
   thisObject.container.frame.position.x = 0
@@ -276,16 +275,10 @@ function newStrategyPart () {
   }
 
   function getContainer (point) {
-    let container
-
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
-    }
+    return undefined
   }
 
-  function physicsLoop () {
+  function physics () {
         // The menuItems also have a target.
 
     for (let i = 0; i < ballStringMenu.length; i++) {