Better positioning when adding a new element

FloatingSpace/FloatingLayer.js

@@ -215,19 +215,19 @@ function newFloatingLayer () {
           switch (floatingObject.type) {
 
             case 'Profile Ball': {
-              payload.position = floatingObject.payload.profile.position
+              payload.targetPosition = floatingObject.payload.profile.position
               payload.visible = floatingObject.payload.profile.visible
               break
             }
             case 'Note': {
               if (floatingObject.payload.notes[floatingObject.payloadNoteIndex] !== undefined) {
-                payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position
+                payload.targetPosition = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position
                 payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible
               }
               break
             }
             case 'Strategy Part': {
-              payload.position = floatingObject.payload.position
+              payload.targetPosition = floatingObject.payload.targetPosition
               payload.visible = floatingObject.payload.visible
               break
             }
@@ -237,11 +237,6 @@ function newFloatingLayer () {
           }
 
           if (payload.visible === true) {
-                          /* The first time that the floatingObject becomes visible, we need to do this. */
-
-            floatingObject.radomizeCurrentPosition(payload.position)
-            floatingObject.radomizeCurrentSpeed()
-
             visibleFloatingObjects.push(floatingObject)
 
             invisibleFloatingObjects.splice(i, 1)  // Delete item from array.
@@ -348,18 +343,18 @@ function newFloatingLayer () {
             switch (floatingObject.type) {
 
               case 'Profile Ball': {
-                payload.position = floatingObject.payload.profile.position
+                payload.targetPosition = floatingObject.payload.profile.position
                 payload.visible = floatingObject.payload.profile.visible
                 break
               }
               case 'Note': {
-                payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position
+                payload.targetPosition = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position
                 payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible
 
                 break
               }
               case 'Strategy Part': {
-                payload.position = floatingObject.payload.position
+                payload.targetPosition = floatingObject.payload.targetPosition
                 payload.visible = floatingObject.payload.visible
                 break
               }
@@ -368,13 +363,13 @@ function newFloatingLayer () {
               }
             }
 
-            if (floatingObject.container.frame.position.x < payload.position.x) {
+            if (floatingObject.container.frame.position.x < payload.targetPosition.x) {
               floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + 0.005
             } else {
               floatingObject.currentSpeed.x = floatingObject.currentSpeed.x - 0.005
             }
 
-            if (floatingObject.container.frame.position.y < payload.position.y) {
+            if (floatingObject.container.frame.position.y < payload.targetPosition.y) {
               floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + 0.005
             } else {
               floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005
@@ -434,7 +429,7 @@ function newFloatingLayer () {
       const coulomb = 0.00001
       const minForce = 0.01
 
-      var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject.container.frame.position.y, 2))  // ... we calculate the distance ...
+      var d = Math.sqrt(Math.pow(payload.targetPosition.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.targetPosition.y - floatingObject.container.frame.position.y, 2))  // ... we calculate the distance ...
 
       var force = coulomb * d * d / floatingObject.currentMass  // In this case the mass of the floatingObject affects the gravity force that it receives, that gives priority to target position to bigger floatingObjects.
 
@@ -448,8 +443,8 @@ function newFloatingLayer () {
       }
 
       var pos2 = {
-        x: payload.position.x,
-        y: payload.position.y
+        x: payload.targetPosition.x,
+        y: payload.targetPosition.y
       }
 
       var posDiff = {             // Next we need the vector resulting from the 2 positions.
@@ -560,15 +555,15 @@ function newFloatingLayer () {
         switch (floatingObject2.type) {
 
           case 'Profile Ball': {
-            payload.position = floatingObject2.payload.profile.position
+            payload.targetPosition = floatingObject2.payload.profile.position
             break
           }
           case 'Note': {
-            payload.position = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position
+            payload.targetPosition = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position
             break
           }
           case 'Strategy Part': {
-            payload.position = floatingObject2.payload.position
+            payload.targetPosition = floatingObject2.payload.targetPosition
             break
           }
           default: {
@@ -576,7 +571,7 @@ function newFloatingLayer () {
           }
         }
 
-        var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject1.container.frame.position.y, 2))  // ... we calculate the distance ...
+        var d = Math.sqrt(Math.pow(payload.targetPosition.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.targetPosition.y - floatingObject1.container.frame.position.y, 2))  // ... we calculate the distance ...
 
         var force = coulomb * floatingObject2.currentMass / (d * d)  // ... and with it the repulsion force.
 
@@ -592,8 +587,8 @@ function newFloatingLayer () {
         }
 
         var pos2 = {
-          x: payload.position.x,
-          y: payload.position.y
+          x: payload.targetPosition.x,
+          y: payload.targetPosition.y
         }
 
         var posDiff = {             // Next we need the vector resulting from the 2 positions.
@@ -753,4 +748,3 @@ function newFloatingLayer () {
     }
   }
 }
-

FloatingSpace/FloatingObject.js

@@ -101,6 +101,11 @@ function newFloatingObject () {
       /* To consider that this object lost the focus, we monitor the space for 2 key events */
     spaceMouseOverEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace)
     spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus)
+
+    /* Assign a position and speed */
+
+    thisObject.radomizeCurrentPosition(thisObject.payload.targetPosition)
+    thisObject.radomizeCurrentSpeed()
   }
 
   function getContainer (point) {
@@ -152,6 +157,17 @@ function newFloatingObject () {
         thisObject.currentFontSize = thisObject.currentFontSize - 0.2
       }
     }
+
+    /* Floating object position in screen coordinates */
+
+    let position = {
+      x: 0,
+      y: 0
+    }
+
+    position = thisObject.container.frame.frameThisPoint(position)
+
+    thisObject.payload.position = position
   }
 
   function onMouseOver (point) {
@@ -268,6 +284,10 @@ function newFloatingObject () {
     }
 
     thisObject.container.frame.position = position
+    thisObject.payload.position = {
+      x: position.x,
+      y: position.y
+    }
   }
 
   function radomizeCurrentSpeed () {

FloatingSpace/ProfileBall.js

@@ -185,8 +185,8 @@ function newProfileBall () {
 
   function drawBackground (pFloatingObject) {
     let point = {
-      x: pFloatingObject.payload.position.x,
-      y: pFloatingObject.payload.position.y
+      x: pFloatingObject.payload.targetPosition.x,
+      y: pFloatingObject.payload.targetPosition.y
     }
 
     point = viewPort.fitIntoVisibleArea(point)

FloatingSpace/StrategyPart.js

@@ -305,11 +305,8 @@ function newStrategyPart () {
 
     if (thisObject.payload.chainParent === undefined) { return }
 
-    /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */
-    let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle)
-
-    thisObject.payload.position.x = parentFloatingObject.container.frame.position.x
-    thisObject.payload.position.y = parentFloatingObject.container.frame.position.y
+    thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x
+    thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y
   }
 
   function onFocus () {
@@ -360,8 +357,8 @@ function newStrategyPart () {
     if (thisObject.payload.chainParent === undefined) { return }
 
     let targetPoint = {
-      x: thisObject.payload.position.x,
-      y: thisObject.payload.position.y
+      x: thisObject.payload.targetPosition.x,
+      y: thisObject.payload.targetPosition.y
     }
 
     let position = {

StrategySpace/Strategy.js

@@ -40,12 +40,12 @@ function newStrategy () {
   function createPart (partType, name, node, parentNode, chainParent, title) {
     let payload = {}
     if (chainParent === undefined) {
-      payload.position = {
+      payload.targetPosition = {
         x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH,
         y: viewPort.height / 2
       }
     } else {
-      payload.position = {
+      payload.targetPosition = {
         x: chainParent.payload.position.x,
         y: chainParent.payload.position.y
       }
@@ -339,8 +339,8 @@ function newStrategy () {
   }
 
   function cleanNode (node) {
-    node.payload.position.x = undefined
-    node.payload.position.y = undefined
+    node.payload.targetPosition.x = undefined
+    node.payload.targetPosition.y = undefined
     node.payload.visible = undefined
     node.payload.upLabel = undefined
     node.payload.downLabel = undefined