canvas corrected

Canvas.js

@@ -452,11 +452,10 @@ function newCanvas () {
 
   function onMouseDown (event) {
     try {
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN,
-        button: event.button
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
 
       dragVector.downX = point.x
       dragVector.downY = point.y
@@ -509,7 +508,7 @@ function newCanvas () {
 
       container = thisObject.panelsSpace.getContainer(point)
 
-      if (container !== undefined && container.isDraggeable === true && event.button === 2) {
+      if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) {
         containerBeingDragged = container
         containerDragStarted = true
         containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -526,7 +525,7 @@ function newCanvas () {
       container = thisObject.chartSpace.getContainer(point)
 
       if (container !== undefined) {
-        if (container.isDraggeable === true && event.button === 2) {
+        if (container.isDraggeable === true) {
           containerBeingDragged = container
           containerDragStarted = true
           containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -562,10 +561,10 @@ function newCanvas () {
         ignoreNextClick = false
         return
       }
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
 
       let container
 
@@ -644,10 +643,10 @@ function newCanvas () {
   function onMouseMove (event) {
     try {
       /* Processing the event */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
 
       if (canvas.chartSpace.viewport !== undefined) {
         canvas.chartSpace.viewport.mousePosition.x = point.x
@@ -691,20 +690,16 @@ function newCanvas () {
 
   function onMouseOver (event) {
     try {
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
       if (containerDragStarted === true) {
-        let point = {
-          x: event.pageX,
-          y: event.pageY - CURRENT_TOP_MARGIN
-        }
         containerBeingDragged.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
 
        /* Then we check who is the current object underneeth the mounse. */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
 
       let container
 

ChartsSpace/EdgeEditor.js

@@ -22,17 +22,20 @@ function newEdgeEditor () {
   thisObject.container.isWheelable = false
   thisObject.container.detectMouseOver = true
 
+  let buttonUsedForDragging
   let isMouseOver
   let whereIsMouseOver = 'outside'
 
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onDragStartedEventSubscriptionId
 
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
 
     thisObject.container.finalize()
     thisObject.container = undefined
@@ -42,6 +45,7 @@ function newEdgeEditor () {
   function initialize () {
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
   }
 
   function onMouseOver (event) {
@@ -52,13 +56,26 @@ function newEdgeEditor () {
     isMouseOver = false
   }
 
-  function getContainer (mousePoint) {
-    if (thisObject.container.frame.isThisPointHere(mousePoint, undefined, undefined, -EDGE_SIZE) === true) {
+  function onDragStarted (event) {
+    switch (event.button) {
+      case 1: {
+        buttonUsedForDragging = 'left'
+        break
+      }
+      case 2: {
+        buttonUsedForDragging = 'right'
+        break
+      }
+    }
+  }
+
+  function getContainer (event) {
+    if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
       console.log('isThisPointHere ', true)
 
       let point = {
-        x: mousePoint.x,
-        y: mousePoint.y
+        x: event.x,
+        y: event.y
       }
       point = unTransformThisPoint(point, thisObject.container)
 
@@ -83,6 +100,7 @@ function newEdgeEditor () {
       }
 
       whereIsMouseOver = 'center'
+      return thisObject.container
     } else {
       isMouseOver = false
       whereIsMouseOver = 'outside'
@@ -92,57 +110,61 @@ function newEdgeEditor () {
   function physics () {
     if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
 
+    let newPosition = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    // newPosition = transformThisPoint(newPosition, thisObject.container)
+
     const MIN_WIDTH = 100
     const MIN_HEIGHT = 50
 
     switch (whereIsMouseOver) {
+      case 'center': {
+        /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */
+        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + newPosition.x
+        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y
+        break
+      }
       case 'top' : {
-        if (thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y < MIN_HEIGHT) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.height - newPosition.y < MIN_HEIGHT) {
           return
         }
-        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + thisObject.container.frame.position.y
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - newPosition.y
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'bottom' : {
-        if (thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y < MIN_HEIGHT) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.height + newPosition.y < MIN_HEIGHT) {
           return
         }
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + newPosition.y
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'left' : {
-        if (thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x < MIN_WIDTH) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.width - newPosition.x < MIN_WIDTH) {
           return
         }
-        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + thisObject.container.frame.position.x
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + newPosition.x
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - newPosition.x
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'right' : {
-        if (thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x < MIN_WIDTH) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.width + newPosition.x < MIN_WIDTH) {
           return
         }
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + newPosition.x
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }

ChartsSpace/TimeMachine.js

@@ -275,11 +275,6 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
-    container = thisObject.edgeEditor.getContainer(point)
-    if (container !== undefined) {
-      return container
-    }
-
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
       container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
@@ -318,8 +313,9 @@ function newTimeMachine () {
       }
     }
 
-    if (thisObject.container.frame.isThisPointHere(point) === true) {
-      return thisObject.container
+    container = thisObject.edgeEditor.getContainer(point)
+    if (container !== undefined) {
+      return container
     }
   }