From a1a7d42e9033507654801237a9b877fd834db7ec Mon Sep 17 00:00:00 2001 From: byronbest <43890914+byronbest@users.noreply.github.com> Date: Tue, 3 Sep 2019 10:34:00 -0700 Subject: [PATCH 1/6] fix problems with info box error when removing plane, moving outside canvas, weird overlapping marker solution using extents --- public_html/script.js | 62 +++++++++++++------------------------------ 1 file changed, 19 insertions(+), 43 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index ad372f1..134bf43 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -1106,55 +1106,31 @@ function refreshHighlighted() { highlighted = Planes[HighlightedPlane]; } - // no highlighted plane - if (!highlighted) { - $('#highlighted_infoblock').hide(); + // no highlighted plane or in process of removing plane + if (!highlighted || !highlighted.marker) { + $('#highlighted_infoblock').fadeOut(); return; } - $('#highlighted_infoblock').show(); - - // Get info box position and size - var infoBox = $('#highlighted_infoblock'); - var infoBoxPosition = infoBox.position(); - if (typeof infoBoxOriginalPosition.top === 'undefined') { - infoBoxOriginalPosition.top = infoBoxPosition.top; - infoBoxOriginalPosition.left = infoBoxPosition.left; - } else { - infoBox.css("left", infoBoxOriginalPosition.left); - infoBox.css("top", infoBoxOriginalPosition.top); - infoBoxPosition = infoBox.position(); - } - var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.outerWidth(), infoBox.outerHeight()); - - // Get map size - var mapCanvas = $('#map_canvas'); - var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height()); - var marker = highlighted.marker; + var infoBox = $('#highlighted_infoblock'); + var mapCanvas = $('#map_canvas'); + + infoBox.fadeIn(100); + var markerCoordinates = highlighted.marker.getGeometry().getCoordinates(); var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); - - // Check for overlap - //FIXME TODO: figure out this/remove this check - if (isPointInsideExtent(markerPosition[0], markerPosition[1], infoBoxExtent) || true) { - // Array of possible new positions for info box - var candidatePositions = []; - candidatePositions.push( { x: 40, y: 80 } ); - candidatePositions.push( { x: markerPosition[0] + 20, y: markerPosition[1] + 60 } ); - - // Find new position - for (var i = 0; i < candidatePositions.length; i++) { - var candidatePosition = candidatePositions[i]; - var candidateExtent = getExtent(candidatePosition.x, candidatePosition.y, infoBox.outerWidth(), infoBox.outerHeight()); - - if (!isPointInsideExtent(markerPosition[0], markerPosition[1], candidateExtent) && isPointInsideExtent(candidatePosition.x, candidatePosition.y, mapExtent)) { - // Found a new position that doesn't overlap marker - move box to that position - infoBox.css("left", candidatePosition.x); - infoBox.css("top", candidatePosition.y); - } - } - } + var x = markerPosition[0] + 20; + var y = markerPosition[1] + 60; + var w = infoBox.outerWidth() + 20; + var h = infoBox.outerHeight(); + if (x > mapCanvas.width() - w) { + x -= w + 20; + } + if (y > mapCanvas.height() - h) { + y -= h; + } + infoBox.animate({ left: x, top: y }, 500); if (highlighted.flight !== null && highlighted.flight !== "") { $('#highlighted_callsign').text(highlighted.flight); From 0ba4ba3fd7da4e569db0e3dff5a1bcb3905503b5 Mon Sep 17 00:00:00 2001 From: byronbest <43890914+byronbest@users.noreply.github.com> Date: Wed, 4 Sep 2019 09:43:13 -0700 Subject: [PATCH 2/6] fixed up the merge problems --- public_html/script.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index 134bf43..c18f09e 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -1106,18 +1106,16 @@ function refreshHighlighted() { highlighted = Planes[HighlightedPlane]; } + var infoBox = $('#highlighted_infoblock'); + // no highlighted plane or in process of removing plane if (!highlighted || !highlighted.marker) { - $('#highlighted_infoblock').fadeOut(); + infoBox.fadeOut(); return; } - - var marker = highlighted.marker; - var infoBox = $('#highlighted_infoblock'); - var mapCanvas = $('#map_canvas'); - infoBox.fadeIn(100); + var mapCanvas = $('#map_canvas'); var markerCoordinates = highlighted.marker.getGeometry().getCoordinates(); var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); var x = markerPosition[0] + 20; From 1a0ba50c4a87507054d5bcdc86868541df3d74cb Mon Sep 17 00:00:00 2001 From: byronbest <43890914+byronbest@users.noreply.github.com> Date: Thu, 5 Dec 2019 17:06:18 -0800 Subject: [PATCH 3/6] fadeOut when marker leaves canvas also move fadeIn to position at new marker before showing infoBox --- public_html/script.js | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index c18f09e..0072d2d 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -1113,22 +1113,28 @@ function refreshHighlighted() { infoBox.fadeOut(); return; } - infoBox.fadeIn(100); var mapCanvas = $('#map_canvas'); var markerCoordinates = highlighted.marker.getGeometry().getCoordinates(); - var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); - var x = markerPosition[0] + 20; - var y = markerPosition[1] + 60; + var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); + var x = markerPosition[0]; + var y = markerPosition[1]; + if (x < 0 || y < 0 || x > mapCanvas.width() || y > mapCanvas.height()) { + infoBox.fadeOut(); + return; + } + x = x + 20; + y = y + 60; var w = infoBox.outerWidth() + 20; var h = infoBox.outerHeight(); - if (x > mapCanvas.width() - w) { - x -= w + 20; - } - if (y > mapCanvas.height() - h) { - y -= h; - } - infoBox.animate({ left: x, top: y }, 500); + if (x > mapCanvas.width() - w) { + x -= w + 20; + } + if (y > mapCanvas.height() - h) { + y -= h; + } + infoBox.fadeIn(100); + infoBox.animate({ left: x, top: y }, 500); if (highlighted.flight !== null && highlighted.flight !== "") { $('#highlighted_callsign').text(highlighted.flight); From 0878bd2ddc3088af65a2e19b6d907545c5b7fce3 Mon Sep 17 00:00:00 2001 From: byronbest <43890914+byronbest@users.noreply.github.com> Date: Thu, 5 Dec 2019 17:13:17 -0800 Subject: [PATCH 4/6] change more indents to tab --- public_html/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index 0072d2d..be9c82c 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -1125,8 +1125,8 @@ function refreshHighlighted() { } x = x + 20; y = y + 60; - var w = infoBox.outerWidth() + 20; - var h = infoBox.outerHeight(); + var w = infoBox.outerWidth() + 20; + var h = infoBox.outerHeight(); if (x > mapCanvas.width() - w) { x -= w + 20; } From 497776c642395e4c69107b2e8c3be9cf6493e0dd Mon Sep 17 00:00:00 2001 From: byronbest <43890914+byronbest@users.noreply.github.com> Date: Mon, 9 Dec 2019 09:32:03 -0800 Subject: [PATCH 5/6] animate only if already visible --- public_html/script.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public_html/script.js b/public_html/script.js index be9c82c..bdac922 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -1133,8 +1133,12 @@ function refreshHighlighted() { if (y > mapCanvas.height() - h) { y -= h; } + if (infoBox.css('visibility', 'visible')) { + infoBox.animate({ left: x, top: y }, 500); + } else { + infoBox.css({ left: x, top: y }, 500); + } infoBox.fadeIn(100); - infoBox.animate({ left: x, top: y }, 500); if (highlighted.flight !== null && highlighted.flight !== "") { $('#highlighted_callsign').text(highlighted.flight); From f45e657583eaccc2e5cf7edba6bfcfbcd440b57f Mon Sep 17 00:00:00 2001 From: byronbest <43890914+byronbest@users.noreply.github.com> Date: Mon, 9 Dec 2019 09:55:09 -0800 Subject: [PATCH 6/6] no need to ease when not visible --- public_html/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public_html/script.js b/public_html/script.js index bdac922..118b94b 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -1136,7 +1136,7 @@ function refreshHighlighted() { if (infoBox.css('visibility', 'visible')) { infoBox.animate({ left: x, top: y }, 500); } else { - infoBox.css({ left: x, top: y }, 500); + infoBox.css({ left: x, top: y }); } infoBox.fadeIn(100);