diff --git a/Frame.js b/Frame.js index ac1b216f8..943a18a25 100644 --- a/Frame.js +++ b/Frame.js @@ -201,7 +201,9 @@ function newFrame () { y: thisObject.position.y } - thisPoint = thisObject.parentFrame.frameThisPoint(thisPoint) + if (thisObject.parentFrame !== undefined) { + thisPoint = thisObject.parentFrame.frameThisPoint(thisPoint) + } /* Now we check if the resulting point is whin the current Frame. */ diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index f312770ee..f3a6f5c35 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -110,6 +110,11 @@ function newPanelsSpace () { function physics () { if (thisObject.visible !== true) { return } + childrenPhysics() + positioningPhysics() + } + + function childrenPhysics () { if (thisObject.panels !== undefined) { for (let i = 0; i < thisObject.panels.length; i++) { let panel = thisObject.panels[i] @@ -120,6 +125,117 @@ function newPanelsSpace () { } } + function positioningPhysics () { + const INCREMENT = 0.5 + if (thisObject.panels !== undefined) { + for (let i = 0; i < thisObject.panels.length; i++) { + let panel = thisObject.panels[i] + + let centerPoint = { + x: panel.container.frame.position.x, + y: panel.container.frame.position.y + } + centerPoint.x = centerPoint.x + panel.container.frame.width / 2 + centerPoint.y = centerPoint.y + panel.container.frame.height / 2 + + /* Lets see which quadrant the panel is at */ + let centerVertical = (viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x) / 2 + viewPort.visibleArea.topLeft.x + let centerHorizontal = (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 + viewPort.visibleArea.topRight.y + + /* According to the quadrant we push the panels to the sides */ + if (centerPoint.x < centerVertical) { + panel.container.frame.position.x = panel.container.frame.position.x - INCREMENT + if (isOverlapping(i, panel.container) === true) { + panel.container.frame.position.x = panel.container.frame.position.x + INCREMENT * 2 + } + if (panel.container.frame.position.x < viewPort.visibleArea.topLeft.x) { + panel.container.frame.position.x = viewPort.visibleArea.topLeft.x + } + } else { + panel.container.frame.position.x = panel.container.frame.position.x + INCREMENT + if (isOverlapping(i, panel.container) === true) { + panel.container.frame.position.x = panel.container.frame.position.x - INCREMENT * 2 + } + if (panel.container.frame.position.x + panel.container.frame.width > viewPort.visibleArea.topRight.x) { + panel.container.frame.position.x = viewPort.visibleArea.topRight.x - panel.container.frame.width + } + } + if (panel.container.frame.height <= viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) { + if (centerPoint.y < centerHorizontal) { + panel.container.frame.position.y = panel.container.frame.position.y - INCREMENT + if (isOverlapping(i, panel.container) === true) { + panel.container.frame.position.y = panel.container.frame.position.y + INCREMENT * 2 + } + if (panel.container.frame.position.y < viewPort.visibleArea.topLeft.y) { + panel.container.frame.position.y = viewPort.visibleArea.topLeft.y + } + } else { + panel.container.frame.position.y = panel.container.frame.position.y + INCREMENT + if (isOverlapping(i, panel.container) === true) { + panel.container.frame.position.y = panel.container.frame.position.y - INCREMENT * 2 + } + if (panel.container.frame.position.y + panel.container.frame.height > viewPort.visibleArea.bottomRight.y) { + panel.container.frame.position.y = viewPort.visibleArea.bottomRight.y - panel.container.frame.height + } + } + } + } + } + + function isOverlapping (currentIndex, currentContainer) { + let corner1 = { + x: currentContainer.frame.position.x, + y: currentContainer.frame.position.y + } + let corner2 = { + x: currentContainer.frame.position.x + currentContainer.frame.width, + y: currentContainer.frame.position.y + } + let corner3 = { + x: currentContainer.frame.position.x + currentContainer.frame.width, + y: currentContainer.frame.position.y + currentContainer.frame.height + } + let corner4 = { + x: currentContainer.frame.position.x, + y: currentContainer.frame.position.y + currentContainer.frame.height + } + + for (let i = 0; i < currentIndex; i++) { + let panel = thisObject.panels[i] + + if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) { return true } + if (isThisPointInsideThisFrame(corner2, panel.container.frame) === true) { return true } + if (isThisPointInsideThisFrame(corner3, panel.container.frame) === true) { return true } + if (isThisPointInsideThisFrame(corner4, panel.container.frame) === true) { return true } + } + + function isThisPointInsideThisFrame (point, frame) { + let corner1 = { + x: frame.position.x, + y: frame.position.y + } + let corner2 = { + x: frame.position.x + frame.width, + y: frame.position.y + } + let corner3 = { + x: frame.position.x + frame.width, + y: frame.position.y + frame.height + } + let corner4 = { + x: frame.position.x, + y: frame.position.y + frame.height + } + if (point.x >= corner1.x && point.y >= corner1.y && point.x <= corner3.x && point.y <= corner3.y) { + return true + } else { + return false + } + } + return false + } + } + function draw () { if (thisObject.visible !== true) { return }