From 24bb177dc81d31ff89a5209cfe591df89c70cfe5 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Sat, 11 Oct 2025 12:30:46 +0200 Subject: [PATCH 1/4] refactor(#25): :recycle: Changed from canvas to text element, lat/lon changed to show target point, don't update target point if right-clicking Did a complete refactor of the coordinate showing logic, to use text element. Also made sure that the lat/lon coordinates are those of the target point. The coordinates won't change when right-clicking. Did some changes in styling as well. --- index.html | 7 +- src/coordinateShowing/coordinateShowing.css | 39 ++++--- src/coordinateShowing/coordinateShowing.js | 107 +++++++------------- src/main.js | 13 +-- 4 files changed, 69 insertions(+), 97 deletions(-) diff --git a/index.html b/index.html index 9aee3f9..982e106 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,6 @@ -
-
- - +
+

Target point:

+

diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css index 0a8ac75..7cb0148 100644 --- a/src/coordinateShowing/coordinateShowing.css +++ b/src/coordinateShowing/coordinateShowing.css @@ -1,26 +1,33 @@ -#canvasContainer { +#coordinatesContainer { + position: absolute; display: flex; flex-direction: column; - position: absolute; right: 10px; bottom: 10px; + padding: 10px; + border-radius: 5px; + z-index: 10; + background-color: #19282c; + width: auto; + height: auto; } -#posCanvas { +#coordinatesHeader { + color: #cccccc; + font-family: Arial, Helvetica, sans-serif; + font-size: 20px; + line-height: 0.75; position: relative; - width: 300px; - height: 50px; - background-color: #19282c; - z-index: 10; - border-radius: 5px; + height: min-content; + margin: 0; + padding-bottom: 20px; + font-weight: bold; } - -#elevationCanvas { +#coordinates { + color: #cccccc; + font-family: Arial, Helvetica, sans-serif; + font-size: 18px; + line-height: 0.75; position: relative; - width: 300px; - height: 50px; - background-color: #19282c; - z-index: 10; - margin-bottom: 10px; - border-radius: 5px; + margin: 0; } diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js index 8045cd0..81bf6ba 100644 --- a/src/coordinateShowing/coordinateShowing.js +++ b/src/coordinateShowing/coordinateShowing.js @@ -1,80 +1,51 @@ import { ecef } from '../config.js' import { wgs84 } from '../config.js' -const posCanvas = document.getElementById('posCanvas') // lat/lon -const elevationCanvas = document.getElementById('elevationCanvas') +const coordinatesText = document.getElementById('coordinates') +const coordinatesContainer = document.getElementById('coordinatesContainer') -export let posCtx -export let elevationCtx +let isRightClick = false -/** - * Initializes the canvases and their contexts. - */ -export function initCoordinateCanvases() { - posCtx = resizeCanvas(posCanvas) - elevationCtx = resizeCanvas(elevationCanvas) -} - -/** - * Resizes the canvas and its context to account for device pixel ratio. - * @param {*} canvas - The canvas element to resize. - * @returns {*} - The resized canvas context. - */ -function resizeCanvas(canvas) { - const dpr = window.devicePixelRatio || 1 - const ctx = canvas.getContext('2d') - - canvas.width = canvas.clientWidth * dpr - canvas.height = canvas.clientHeight * dpr - - // Scale context so drawing uses CSS pixels - ctx.setTransform(dpr, 0, 0, dpr, 0, 0) - return ctx -} - -/** - * Draw the text on a given canvas. - */ -function drawText(ctx, text, canvas) { - const centerX = canvas.clientWidth / 2 - const centerY = canvas.clientHeight / 2 - ctx.clearRect(0, 0, canvas.width, canvas.height) - ctx.fillStyle = '#cccccc' - ctx.font = '20px Arial' - ctx.textAlign = 'center' - ctx.textBaseline = 'middle' - ctx.fillText(text, centerX, centerY) -} - -/** - * Updates the lat/lon coordinates. +/** Sets up a right-click listener on the Potree viewer to toggle updates of coordinate display. + * Makes sure coordinates are only updated when not right-clicking. + * @param potreeViewer - The Potree viewer instance */ -export function updateCoordinateText() { - const cam = window.potreeViewer.scene.view.position - const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]) - drawText( - posCtx, - `lat = ${lat.toFixed(5)}˚ lon = ${lon.toFixed(5)}˚`, - posCanvas - ) +export function setupRightClickListener(potreeViewer) { + const viewerElement = potreeViewer.renderer.domElement + + viewerElement.addEventListener('mousedown', (event) => { + if (event.button === 2) { + isRightClick = true + } + }) + + viewerElement.addEventListener('mousedown', (event) => { + if (event.button === 0) { + isRightClick = false + } + }) } /** - * Shows target elevations if camera is in orbit mode. + * Updates the displayed target point coordinates based on the point */ -export function updateTargetElevation() { - const pivot = window.potreeViewer.scene.view.getPivot() - const controls = window.potreeViewer.getControls() - const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2] - - if (controls === window.potreeViewer.orbitControls) { - elevationCanvas.style.display = 'inline' - drawText( - elevationCtx, - `Target elevation = ${height.toFixed(4)}m`, - elevationCanvas - ) - } else { - elevationCanvas.style.display = 'none' +export function updateText() { + if (!isRightClick) { + const pivot = window.potreeViewer.scene.view.getPivot() + const controls = window.potreeViewer.getControls() + const [lon, lat, elevation] = proj4(ecef, wgs84, [ + pivot.x, + pivot.y, + pivot.z + ]) + + if (controls === window.potreeViewer.orbitControls) { + coordinatesContainer.style.display = 'inline' + coordinatesText.innerText = `Latitude = ${lat.toFixed(4)}˚ + \n Longitude = ${lon.toFixed(4)}˚ + \n Elevation = ${elevation.toFixed(4)}m` + } else { + coordinatesContainer.style.display = 'none' + } } } diff --git a/src/main.js b/src/main.js index aaa415a..b72a825 100644 --- a/src/main.js +++ b/src/main.js @@ -3,9 +3,8 @@ import { createCesiumViewer } from './cesiumViewer.js' import { createPotreeViewer } from './potreeViewer.js' import { syncCameras } from './cameraSync.js' import { - initCoordinateCanvases, - updateCoordinateText, - updateTargetElevation + updateText, + setupRightClickListener } from './CoordinateShowing/coordinateShowing.js' async function init() { @@ -17,12 +16,7 @@ async function init() { POTREE_SETTINGS ) - initCoordinateCanvases() - - potreeViewer.addEventListener('update', updateCoordinateText) - potreeViewer.addEventListener('update', updateTargetElevation) - - window.addEventListener('resize', initCoordinateCanvases) + setupRightClickListener(potreeViewer) function loop(timestamp) { requestAnimationFrame(loop) @@ -30,6 +24,7 @@ async function init() { potreeViewer.render() syncCameras(potreeViewer, cesiumViewer) cesiumViewer.render() + updateText() } requestAnimationFrame(loop) From 25e4d721bce9dded859bc7b6c28c228d129dac1d Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 13 Oct 2025 09:07:57 +0200 Subject: [PATCH 2/4] refactor(#25): :truck: Rename coordinateShowing to CoordinateShowing --- .../coordinateShowing.css | 0 src/{coordinateShowing => CoordinateShowing}/coordinateShowing.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/{coordinateShowing => CoordinateShowing}/coordinateShowing.css (100%) rename src/{coordinateShowing => CoordinateShowing}/coordinateShowing.js (100%) diff --git a/src/coordinateShowing/coordinateShowing.css b/src/CoordinateShowing/coordinateShowing.css similarity index 100% rename from src/coordinateShowing/coordinateShowing.css rename to src/CoordinateShowing/coordinateShowing.css diff --git a/src/coordinateShowing/coordinateShowing.js b/src/CoordinateShowing/coordinateShowing.js similarity index 100% rename from src/coordinateShowing/coordinateShowing.js rename to src/CoordinateShowing/coordinateShowing.js From 31b4e03315f30fa45bc47668d055715fcd409176 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 13 Oct 2025 09:55:49 +0200 Subject: [PATCH 3/4] refactor(#25): :recycle: Change target point to only when double-clicking --- index.html | 2 +- src/CoordinateShowing/coordinateShowing.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 982e106..ce7fdbb 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ { + viewerElement.addEventListener('dblclick', (event) => { if (event.button === 0) { isRightClick = false } From 8e985df0620c65c32128cb8627dd850e758ef811 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 13 Oct 2025 10:51:12 +0200 Subject: [PATCH 4/4] fix(#25): :bug: Fix issue with copying target point text --- index.html | 4 +++- src/CoordinateShowing/coordinateShowing.css | 5 +++-- src/CoordinateShowing/coordinateShowing.js | 10 ++++++---- src/main.js | 2 +- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index ce7fdbb..b9c3d02 100644 --- a/index.html +++ b/index.html @@ -71,7 +71,9 @@

Target point:

-

+

Latitude:

+

Longitude:

+

Elevation:

diff --git a/src/CoordinateShowing/coordinateShowing.css b/src/CoordinateShowing/coordinateShowing.css index 7cb0148..64dedf3 100644 --- a/src/CoordinateShowing/coordinateShowing.css +++ b/src/CoordinateShowing/coordinateShowing.css @@ -23,11 +23,12 @@ padding-bottom: 20px; font-weight: bold; } -#coordinates { +#latitude, +#longitude, +#elevation { color: #cccccc; font-family: Arial, Helvetica, sans-serif; font-size: 18px; - line-height: 0.75; position: relative; margin: 0; } diff --git a/src/CoordinateShowing/coordinateShowing.js b/src/CoordinateShowing/coordinateShowing.js index def0c9b..9845bd3 100644 --- a/src/CoordinateShowing/coordinateShowing.js +++ b/src/CoordinateShowing/coordinateShowing.js @@ -1,7 +1,9 @@ import { ecef } from '../config.js' import { wgs84 } from '../config.js' -const coordinatesText = document.getElementById('coordinates') +const latitudeText = document.getElementById('latitude') +const longitudeText = document.getElementById('longitude') +const elevationText = document.getElementById('elevation') const coordinatesContainer = document.getElementById('coordinatesContainer') let isRightClick = false @@ -41,9 +43,9 @@ export function updateText() { if (controls === window.potreeViewer.orbitControls) { coordinatesContainer.style.display = 'inline' - coordinatesText.innerText = `Latitude = ${lat.toFixed(4)}˚ - \n Longitude = ${lon.toFixed(4)}˚ - \n Elevation = ${elevation.toFixed(4)}m` + latitudeText.textContent = `Latitude = ${lat.toFixed(4)}˚` + longitudeText.textContent = `Longitude = ${lon.toFixed(4)}˚` + elevationText.textContent = `Elevation = ${elevation.toFixed(4)}m` } else { coordinatesContainer.style.display = 'none' } diff --git a/src/main.js b/src/main.js index b72a825..462edd4 100644 --- a/src/main.js +++ b/src/main.js @@ -16,6 +16,7 @@ async function init() { POTREE_SETTINGS ) + potreeViewer.addEventListener('camera_changed', updateText) setupRightClickListener(potreeViewer) function loop(timestamp) { @@ -24,7 +25,6 @@ async function init() { potreeViewer.render() syncCameras(potreeViewer, cesiumViewer) cesiumViewer.render() - updateText() } requestAnimationFrame(loop)