From cbe01f879bb4ec84bb6be8bc6aa73a07fe0d2330 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 6 Oct 2025 08:52:07 +0200 Subject: [PATCH] refactor(#10): moved init function to main --- index.html | 3 +- .../coordinateShowing.css | 0 .../coordinateShowing.js | 29 ++++++++----------- src/main.js | 12 ++++++++ 4 files changed, 25 insertions(+), 19 deletions(-) rename src/{ => coordinateShowing}/coordinateShowing.css (100%) rename src/{ => coordinateShowing}/coordinateShowing.js (84%) diff --git a/index.html b/index.html index 98d1737..cc1443f 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ href="/libs/jstree/themes/mixed/style.css" /> - + @@ -97,6 +97,5 @@ }) - diff --git a/src/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css similarity index 100% rename from src/coordinateShowing.css rename to src/coordinateShowing/coordinateShowing.css diff --git a/src/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js similarity index 84% rename from src/coordinateShowing.js rename to src/coordinateShowing/coordinateShowing.js index 8bd0587..8ec2d6a 100644 --- a/src/coordinateShowing.js +++ b/src/coordinateShowing/coordinateShowing.js @@ -4,8 +4,16 @@ const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; // EPSG:4326 (geogr const posCanvas = document.getElementById('posCanvas'); // lat/lon const elevationCanvas = document.getElementById('elevationCanvas'); -let posCtx; -let elevationCtx; +export let posCtx; +export let elevationCtx; + +/** + * Initializes the canvases and their contexts. + */ +export function initCanvases() { + posCtx = resizeCanvas(posCanvas); + elevationCtx = resizeCanvas(elevationCanvas); +} /** * Resizes the canvas and its context to account for device pixel ratio. @@ -41,7 +49,7 @@ function drawText(ctx, text, canvas) { /** * Updates the lat/lon position. */ -function updatePosition() { +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(2)}˚ lon = ${lon.toFixed(2)}˚`, posCanvas); @@ -50,7 +58,7 @@ function updatePosition() { /** * Shows target elevations if camera is in orbit mode. */ -function updateTargetElevation() { +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]; @@ -64,20 +72,7 @@ function updateTargetElevation() { } -function init() { - posCtx = resizeCanvas(posCanvas); - elevationCtx = resizeCanvas(elevationCanvas); - - viewer.addEventListener("update", updatePosition); - viewer.addEventListener("update", updateTargetElevation); - - window.addEventListener('resize', () => { - posCtx = resizeCanvas(posCanvas); - elevationCtx = resizeCanvas(elevationCanvas); - }); -} -init(); diff --git a/src/main.js b/src/main.js index 8b13789..2355872 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1,13 @@ +import { initCanvases, updatePosition, updateTargetElevation } from "./coordinateShowing/coordinateShowing.js"; + +function init() { + initCanvases(); + + viewer.addEventListener("update", updatePosition); + viewer.addEventListener("update", updateTargetElevation); + + window.addEventListener('resize', initCanvases); +} + +init();