Plotter panels cannot be dragged outside the chart space

Canvas.js

@@ -744,7 +744,10 @@ function newCanvas () {
           }
 
           if (containerBeingDragged !== undefined) {
-            containerBeingDragged.draggTo(displaceVector)
+            let moveSucceed = containerBeingDragged.moveTo(displaceVector)
+            if (moveSucceed === false) {
+              deactivateDragging(event)
+            }
           }
         }
 

Container.js

@@ -14,7 +14,9 @@ function newContainer () {
     isWheelable: false,
     detectMouseOver: false,
     name: undefined,
-    draggTo: draggTo,
+    fitFunction: undefined,
+    isVisibleFunction: undefined,
+    moveTo: moveTo,
     initialize: initialize,
     finalize: finalize,
     connectToParent: connectToParent,
@@ -186,12 +188,36 @@ function newContainer () {
     return false
   }
 
-  function draggTo (point) {
-    if (thisObject.notDraggingOnX === false) {
-      thisObject.frame.position.x = thisObject.frame.position.x + point.x
+  function moveTo (point) {
+    /* This function will move the container to the destination point. If it has a visible function will use it
+    to see if the container can be moved there or not. It wont if the center will not be visible.
+
+    Returns true if move was possible, false if not. */
+
+    let checkPoint = {}
+
+    if (thisObject.isVisibleFunction === undefined) {
+      drag()
+      return true
+    } else {
+      checkPoint.x = thisObject.frame.position.x + point.x + thisObject.frame.width / 2
+      checkPoint.y = thisObject.frame.position.y + point.y + thisObject.frame.height / 2
+      let isVisible = thisObject.isVisibleFunction(checkPoint)
+      if (isVisible === true) {
+        drag()
+        return true
+      } else {
+        return false
+      }
     }
-    if (thisObject.notDraggingOnY === false) {
-      thisObject.frame.position.y = thisObject.frame.position.y + point.y
+    function drag () {
+      if (thisObject.notDraggingOnX === false) {
+        thisObject.frame.position.x = thisObject.frame.position.x + point.x
+      }
+      if (thisObject.notDraggingOnY === false) {
+        thisObject.frame.position.y = thisObject.frame.position.y + point.y
+      }
     }
   }
 }
+

Spaces/ChartSpace.js

@@ -17,6 +17,7 @@ function newChartSpace () {
     visible: true,
     container: undefined,
     fitIntoVisibleArea: fitIntoVisibleArea,
+    isThisPointVisible: isThisPointVisible,
     physics: physics,
     drawBackground: drawBackground,
     draw: draw,
@@ -136,6 +137,26 @@ function newChartSpace () {
     return returnPoint
   }
 
+  function isThisPointVisible (point) {
+    if (point.x > browserCanvas.width) {
+      return false
+    }
+
+    if (point.x < 0) {
+      return false
+    }
+
+    if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) {
+      return false
+    }
+
+    if (point.y < 0) {
+      return false
+    }
+
+    return true
+  }
+
   function physics () {
     thisObject.container.frame.height = BOTTOM_SPACE_POSITION
 

Spaces/FloatingSpace.js

@@ -13,6 +13,8 @@ function newFloatingSpace () {
     strategyPartConstructor: undefined,
     noteSets: undefined,
     container: undefined,
+    fitIntoVisibleArea: fitIntoVisibleArea,
+    isThisPointVisible: isThisPointVisible,
     makeVisible: makeVisible,
     makeInvisible: makeInvisible,
     draw: draw,
@@ -61,6 +63,53 @@ function newFloatingSpace () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
   }
 
+  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 > browserCanvas.height) {
+      returnPoint.y = browserCanvas.height
+    }
+
+    return returnPoint
+  }
+
+  function isThisPointVisible (point) {
+    if (point.x > browserCanvas.width) {
+      return false
+    }
+
+    if (point.x < 0) {
+      return false
+    }
+
+    if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) {
+      return false
+    }
+
+    if (point.y > browserCanvas.height) {
+      return false
+    }
+
+    return true
+  }
+
   function onMouseWheel (event) {
     thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta)
   }

Spaces/PanelsSpace.js

@@ -55,6 +55,7 @@ function newPanelsSpace () {
         {
           panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName)
           panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea
+          panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
           panel.initialize()
           break
         }