Visible body and larger workspace

FloatingSpace/FloatingObject.js

@@ -7,6 +7,7 @@ function newFloatingObject () {
   logger.fileName = MODULE_NAME
 
   let thisObject = {
+    fitFunction: undefined,
     container: undefined,
     positionLocked: false,
     isOnFocus: false,
@@ -61,6 +62,7 @@ function newFloatingObject () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.payload = undefined
+    thisObject.fitFunction = undefined
   }
 
   function initialize (type, payload) {

FloatingSpace/StrategyPart.js

@@ -7,6 +7,7 @@ function newStrategyPart () {
   logger.fileName = MODULE_NAME
 
   let thisObject = {
+    fitFunction: undefined,
     type: undefined,
     menu: undefined,
     isOnFocus: false,
@@ -53,6 +54,7 @@ function newStrategyPart () {
     thisObject.menu = undefined
     thisObject.partTitle.finalize()
     thisObject.partTitle = undefined
+    thisObject.fitFunction = undefined
 
     if (thisObject.codeEditor !== undefined) {
       thisObject.codeEditor.finalize()
@@ -601,11 +603,19 @@ function newStrategyPart () {
 
     let radius = thisObject.container.frame.radius
 
-    if (radius > 0.5 && image === undefined) {
-            /* Main FloatingObject */
+    if (radius > 0.5) {
+      const VISIBLE_RADIUS = 5
+
+      let visiblePosition = {
+        x: thisObject.container.frame.position.x,
+        y: thisObject.container.frame.position.y
+      }
+
+      visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
+      visiblePosition = thisObject.fitFunction(visiblePosition)
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
 
       browserCanvasContext.fillStyle = thisObject.payload.floatingObject.fillStyle
@@ -613,7 +623,7 @@ function newStrategyPart () {
       browserCanvasContext.fill()
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(position.x, position.y, radius * 1 / 3, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS / 2, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
 
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'

FloatingSpace/StrategyPartConstructor.js

@@ -31,11 +31,13 @@ function newStrategyPartConstructor () {
 
   function createStrategyPart (payload) {
     let floatingObject = newFloatingObject()
+    floatingObject.fitFunction = canvas.floatingSpace.fitIntoVisibleArea
     floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false)
     floatingObject.initialize('Strategy Part', payload)
     payload.floatingObject = floatingObject
 
     let strategyPart = newStrategyPart()
+    strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea
     strategyPart.initialize(payload)
     strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true)
     payload.uiObject = strategyPart

Spaces/FloatingSpace.js

@@ -1,11 +1,11 @@
- 
+
 function newFloatingSpace () {
   const MODULE_NAME = 'Floating Space'
   const ERROR_LOG = true
-    /*
-    The Floating Space is the place where floating elements like floatingObjects, live and are rendered.
-    This space has its own physics which helps with the animation of these objects and also preventing them to overlap.
-    */
+   /*
+   The Floating Space is the place where floating elements like floatingObjects, live and are rendered.
+   This space has its own physics which helps with the animation of these objects and also preventing them to overlap.
+   */
 
   let thisObject = {
     floatingLayer: undefined,               // This is the array of floatingObjects being displayed
@@ -31,8 +31,8 @@ function newFloatingSpace () {
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
   thisObject.container.frame.radius = 0
-  thisObject.container.frame.width = browserCanvas.width * 3
-  thisObject.container.frame.height = browserCanvas.height * 3
+  thisObject.container.frame.width = browserCanvas.width * 10
+  thisObject.container.frame.height = browserCanvas.height * 10
   thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2
   thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2
 
@@ -64,7 +64,9 @@ function newFloatingSpace () {
   }
 
   function fitIntoVisibleArea (point) {
-       /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+      /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+
+    const RED_LINE = 5
 
     let returnPoint = {
       x: point.x,
@@ -79,8 +81,8 @@ function newFloatingSpace () {
       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 < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) {
+      returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE
     }
 
     if (point.y > browserCanvas.height) {
@@ -91,6 +93,8 @@ function newFloatingSpace () {
   }
 
   function isThisPointVisible (point) {
+    const RED_LINE = 5
+
     if (point.x > browserCanvas.width) {
       return false
     }
@@ -99,7 +103,7 @@ function newFloatingSpace () {
       return false
     }
 
-    if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) {
+    if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) {
       return false
     }
 
@@ -155,3 +159,4 @@ function newFloatingSpace () {
     browserCanvasContext.fill()
   }
 }
+