diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index bb4ebe3c4..31f49330a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -182,11 +182,21 @@ function newFloatingLayer () { floatingObject.drawBackground() } + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawMiddleground() + } + for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] floatingObject.drawForeground() } + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawOnFocus() + } + makeVisible() } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6fcc5236c..2ef8ca566 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -27,7 +27,9 @@ function newFloatingObject () { radomizeCurrentPosition: radomizeCurrentPosition, radomizeCurrentSpeed: radomizeCurrentSpeed, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. getContainer: getContainer, @@ -202,10 +204,18 @@ function newFloatingObject () { thisObject.underlayingObject.drawBackground(thisObject) } + function drawMiddleground () { + thisObject.underlayingObject.drawMiddleground(thisObject) + } + function drawForeground () { thisObject.underlayingObject.drawForeground(thisObject) } + function drawOnFocus () { + thisObject.underlayingObject.drawOnFocus(thisObject) + } + function initializeMass (suggestedValue) { let mass = suggestedValue if (mass < 0.1) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 0fda6958f..6bb4e5858 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -6,7 +6,9 @@ function newNote () { container: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, initialize: initialize } @@ -88,6 +90,14 @@ function newNote () { } } + function drawOnFocus () { + + } + + function drawMiddleground () { + + } + function drawForeground (pFloatingObject) { const BUBBLE_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 14 diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 2e8c5c526..544370e61 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -6,7 +6,9 @@ function newProfileBall () { container: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, initialize: initialize } @@ -215,6 +217,14 @@ function newProfileBall () { } } + function drawOnFocus () { + + } + + function drawMiddleground () { + + } + function drawForeground (pFloatingObject) { if (pFloatingObject.container.frame.radius > 5) { /* Contourn */ diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index a693f2745..f4482fcb4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -14,7 +14,9 @@ function newStrategyPart () { payload: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, finalize: finalize, initialize: initialize @@ -316,15 +318,37 @@ function newStrategyPart () { function drawBackground (pFloatingObject) { if (thisObject.isOnFocus === false) { - drawPartBackground(pFloatingObject) + drawConnectingLine(pFloatingObject) thisObject.menu.drawBackground() + } + } - drawPartForeground(pFloatingObject) + function drawMiddleground (pFloatingObject) { + if (thisObject.isOnFocus === false) { + drawText(pFloatingObject) + } + } + + function drawForeground (pFloatingObject) { + if (thisObject.isOnFocus === false) { + drawBodyAndPicture(pFloatingObject) thisObject.menu.drawForeground() } } - function drawPartBackground (pFloatingObject) { + function drawOnFocus (pFloatingObject) { + if (thisObject.isOnFocus === true) { + drawConnectingLine(pFloatingObject) + thisObject.menu.drawBackground() + + drawText(pFloatingObject) + + drawBodyAndPicture(pFloatingObject) + thisObject.menu.drawForeground() + } + } + + function drawConnectingLine (pFloatingObject) { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ @@ -371,67 +395,55 @@ function newStrategyPart () { browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' browserCanvasContext.fill() } + } - drawText() + function drawText (pFloatingObject) { +/* Text Follows */ + let position = { + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y + } + let radius = pFloatingObject.container.frame.radius + /* Label Text */ + let labelPoint + let fontSize = pFloatingObject.currentFontSize + let label - function drawText () { - /* Text Follows */ - let position = { - x: pFloatingObject.container.frame.position.x, - y: pFloatingObject.container.frame.position.y - } - let radius = pFloatingObject.container.frame.radius - /* Label Text */ - let labelPoint - let fontSize = pFloatingObject.currentFontSize - let label + if (radius > 6 && thisObject.isOnFocus === true) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - if (radius > 6 && thisObject.isOnFocus === true) { - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + label = pFloatingObject.payload.downLabel + + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - label = pFloatingObject.payload.downLabel - - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - if (radius > 6) { - label = pFloatingObject.payload.upLabel + } + if (radius > 6) { + label = pFloatingObject.payload.upLabel - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } } - function drawForeground (pFloatingObject) { - if (thisObject.isOnFocus === true) { - drawPartBackground(pFloatingObject) - thisObject.menu.drawBackground() - - drawPartForeground(pFloatingObject) - thisObject.menu.drawForeground() - } - } - - function drawPartForeground (pFloatingObject) { + function drawBodyAndPicture (pFloatingObject) { let position = { x: pFloatingObject.container.frame.position.x, y: pFloatingObject.container.frame.position.y