From 74016ea9a276bbb019e9bb95962025fcec2108a3 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 6 Oct 2025 11:15:19 +0200 Subject: [PATCH] refactor(#10): Fix merge conflict and apply new changes --- src/coordinateShowing/coordinateShowing.css | 11 ++- src/coordinateShowing/coordinateShowing.js | 88 +++++++++++---------- src/main.js | 15 ++-- 3 files changed, 59 insertions(+), 55 deletions(-) diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css index da616a2..07f2133 100644 --- a/src/coordinateShowing/coordinateShowing.css +++ b/src/coordinateShowing/coordinateShowing.css @@ -1,12 +1,11 @@ - #posCanvas { position: absolute; left: 10px; bottom: 10px; width: 300px; height: 50px; - pointer-events: none; - background-color: #19282C; + pointer-events: none; + background-color: #19282c; z-index: 10; border-radius: 5px; } @@ -17,8 +16,8 @@ top: 15px; width: 300px; height: 50px; - pointer-events: none; - background-color: #19282C; + pointer-events: none; + background-color: #19282c; z-index: 10; border-radius: 5px; -} \ No newline at end of file +} diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js index 941afb3..7019138 100644 --- a/src/coordinateShowing/coordinateShowing.js +++ b/src/coordinateShowing/coordinateShowing.js @@ -1,18 +1,18 @@ -const ecef = "+proj=geocent +datum=WGS84 +units=m +no_defs"; // EPSG:4978 (geocentric coordinates) -const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; // EPSG:4326 (geographic coordinates) +const ecef = '+proj=geocent +datum=WGS84 +units=m +no_defs' // EPSG:4978 (geocentric coordinates) +const wgs84 = '+proj=longlat +datum=WGS84 +no_defs' // EPSG:4326 (geographic coordinates) -const posCanvas = document.getElementById('posCanvas'); // lat/lon -const elevationCanvas = document.getElementById('elevationCanvas'); +const posCanvas = document.getElementById('posCanvas') // lat/lon +const elevationCanvas = document.getElementById('elevationCanvas') -export let posCtx; -export let elevationCtx; +export let posCtx +export let elevationCtx -/** +/** * Initializes the canvases and their contexts. */ export function initCanvases() { - posCtx = resizeCanvas(posCanvas); - elevationCtx = resizeCanvas(elevationCanvas); + posCtx = resizeCanvas(posCanvas) + elevationCtx = resizeCanvas(elevationCanvas) } /** @@ -21,58 +21,60 @@ export function initCanvases() { * @returns {*} - The resized canvas context. */ function resizeCanvas(canvas) { - const dpr = window.devicePixelRatio || 1; - const ctx = canvas.getContext('2d'); + const dpr = window.devicePixelRatio || 1 + const ctx = canvas.getContext('2d') - canvas.width = canvas.clientWidth * dpr; - canvas.height = canvas.clientHeight * dpr; + 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; + // 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); + 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 position. */ export function updatePosition() { - const cam = window.viewer.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); + 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 + ) } /** * Shows target elevations if camera is in orbit mode. */ export function updateTargetElevation() { - const pivot = window.viewer.scene.view.getPivot(); - const controls = window.viewer.getControls(); - const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2]; - - if (controls === window.viewer.orbitControls) { - elevationCanvas.style.display = 'inline'; - drawText(elevationCtx, `Target elevation = ${height.toFixed(4)}m`, elevationCanvas); - } else { - elevationCanvas.style.display = 'none'; - } + 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' + } } - - - - - - diff --git a/src/main.js b/src/main.js index f736949..e1670e1 100644 --- a/src/main.js +++ b/src/main.js @@ -2,8 +2,11 @@ import { POTREE_POINTCLOUD_URL, POTREE_SETTINGS } from './config.js' import { createCesiumViewer } from './cesiumViewer.js' import { createPotreeViewer } from './potreeViewer.js' import { syncCameras } from './cameraSync.js' -import { initCanvases, updatePosition, updateTargetElevation } from "./coordinateShowing/coordinateShowing.js"; - +import { + initCanvases, + updatePosition, + updateTargetElevation +} from './coordinateShowing/coordinateShowing.js' async function init() { window.cesiumViewer = createCesiumViewer('cesiumContainer') @@ -14,12 +17,12 @@ async function init() { POTREE_SETTINGS ) - initCanvases(); + initCanvases() - viewer.addEventListener("update", updatePosition); - viewer.addEventListener("update", updateTargetElevation); + potreeViewer.addEventListener('update', updatePosition) + potreeViewer.addEventListener('update', updateTargetElevation) - window.addEventListener('resize', initCanvases); + window.addEventListener('resize', initCanvases) function loop(timestamp) { requestAnimationFrame(loop)