Next is getCointainers with purpose

Canvas.js

@@ -510,7 +510,7 @@ function newCanvas () {
 
       container = thisObject.topSpace.getContainer(point)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
@@ -519,7 +519,7 @@ function newCanvas () {
 
       container = thisObject.bottomSpace.getContainer(point)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
@@ -528,7 +528,7 @@ function newCanvas () {
 
       container = thisObject.panelsSpace.getContainer(point)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
@@ -548,7 +548,7 @@ function newCanvas () {
 
       container = thisObject.chartSpace.getContainer(point)
 
-      if (container !== undefined) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }

ProductCard.js

@@ -113,12 +113,11 @@ function newProductCard () {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
-      var container = newContainer()
-      container.name = 'Product Card ' + thisObject.code
-      container.initialize()
-      container.isDraggeable = false
-      container.isClickeable = true
-      thisObject.container = container
+      thisObject.container = newContainer()
+      thisObject.container.initialize(MODULE_NAME + thisObject.code)
+      thisObject.container.detectMouseOver = true
+      thisObject.container.isDraggeable = false
+      thisObject.container.isClickeable = true
 
        /* Add information that will later be needed. */
 
@@ -136,9 +135,9 @@ function newProductCard () {
         y: 0
       }
 
-      this.container.frame.position = position
-      this.container.frame.width = UI_PANEL.WIDTH.LARGE - 20
-      this.container.frame.height = 100
+      thisObject.container.frame.position = position
+      thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE - 20
+      thisObject.container.frame.height = 100
 
        /* We retrieve the locally stored status of the Product */
 
@@ -263,8 +262,8 @@ function newProductCard () {
 
        /* First we check if this point is inside this space. */
 
-    if (this.container.frame.isThisPointHere(point, true) === true) {
-      return this.container
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
     } else {
            /* This point does not belong to this space. */
 

TimeMachine.js

@@ -28,6 +28,7 @@ function newTimeMachine () {
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
   thisObject.container.isDraggeable = false
+  thisObject.container.detectMouseOver = true
 
   thisObject.container.frame.width = TIME_MACHINE_WIDTH
   thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y

TimelineChart.js

@@ -23,6 +23,7 @@
 
    thisObject.container = newContainer()
    thisObject.container.initialize(MODULE_NAME)
+   thisObject.container.detectMouseOver = true
 
    let chartGrid
    let breakpointsBar
@@ -65,7 +66,7 @@
 
        thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
          recalculateScale()
-         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true)
+         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition)
        })
 
        thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {

Utilities.js

@@ -100,7 +100,7 @@ function getUserPosition (timeLineCoordinateSystem) {
   return userPosition
 }
 
-function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY) {
+function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center) {
   let userPosition = getUserPosition(timeLineCoordinateSystem)
 
   viewPort.newZoomLevel(userPosition.zoom)
@@ -117,9 +117,17 @@ function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignor
   targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint)
   targetPoint = transformThisPoint(targetPoint, container)
 
-  let centerPoint = {
-    x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
-    y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+  let centerPoint
+  if (center !== undefined) {
+    centerPoint = {
+      x: center.x,
+      y: center.y
+    }
+  } else {
+    centerPoint = {
+      x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
+      y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+    }
   }
 
     /* Lets calculate the displace vector, from the point we want at the center, to the current center. */