diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index b90da54a3..5137e6d2d 100644 --- a/FloatingSpace/FloatingObject.js +++ b/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) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 57c02c27d..50d0cd8a0 100644 --- a/FloatingSpace/StrategyPart.js +++ b/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)' diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index f3f475ef8..4f32eb23c 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/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 diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 521ae07d6..d160d6bc8 100644 --- a/Spaces/FloatingSpace.js +++ b/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() } } +