astro-viewer 3.0.0 → 3.1.0

package/lib-esm/model/earth/XYZVisibleTilesManager.js

@@ -1,206 +1,75 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
+import XYZRayPickingUtils from '../../utils/XYZRayPickingUtils.js';
 export class XYZVisibleTilesManager {
-    _provider;
-    constructor(provider) {
-        this._provider = provider;
-    }
-    selectTiles(input) {
-        const currentZoom = this._provider.resolveZoom(input.fovDeg ?? 180);
-        const coreTiles = this.orderTilesByScreenRelevance(this.buildCoreVisibleTiles(currentZoom, input), currentZoom, input.centerSphericalDeg ?? null);
-        const coverageTiles = this.orderTilesByScreenRelevance(this.buildCoverageTiles(currentZoom, input, coreTiles), currentZoom, input.centerSphericalDeg ?? null);
-        const currentTiles = [...coreTiles, ...coverageTiles];
-        const fallbackSeedTiles = this.buildFallbackSeedTiles(coreTiles, currentZoom, input.centerSphericalDeg ?? null);
-        const fallbackTiles = this.orderFallbackTiles(Array.from(this.buildFallbackMap(fallbackSeedTiles, currentZoom).values()), currentZoom, input.centerSphericalDeg ?? null);
-        const key = `${currentZoom}:${currentTiles.map((tile) => `${tile.x}/${tile.y}`).join('|')}`;
-        return {
-            key,
-            currentTiles,
-            fallbackTiles,
-            currentZoom,
-            coreTileCount: coreTiles.length,
-            coverageTileCount: coverageTiles.length,
+    _ancestorsMap = new Map();
+    _visibleTilesMap = new Map();
+    _visibleTiles = [];
+    _selection = {
+        key: '0:',
+        currentZoom: 0,
+        visibleTiles: [],
+        visibleTilesMap: new Map(),
+        ancestorsMap: new Map(),
+    };
+    get ancestorsMap() {
+        return this._ancestorsMap;
+    }
+    get visibleTiles() {
+        return this._visibleTiles;
+    }
+    get visibleTilesMap() {
+        return this._visibleTilesMap;
+    }
+    get selection() {
+        return this._selection;
+    }
+    computeVisibleTiles(z, xyzModel, webgl, camera, pMatrix, sampleCount = 9, padding = 2) {
+        this._visibleTiles = XYZRayPickingUtils.getVisibleTilesFromViewport(z, xyzModel, webgl, camera, pMatrix, sampleCount, padding);
+        this._visibleTilesMap = this.buildTileMap(this._visibleTiles);
+        this.refreshAncestorsMap(this._visibleTiles);
+        this._selection = {
+            key: this.buildSelectionKey(z, this._visibleTiles),
+            currentZoom: z,
+            visibleTiles: this._visibleTiles,
+            visibleTilesMap: this._visibleTilesMap,
+            ancestorsMap: this._ancestorsMap,
         };
-    }
-    buildCoreVisibleTiles(currentZoom, input) {
-        const samples = this.collectCoverageSamples(input);
-        if (samples.length === 0) {
-            return this._provider.getVisibleTilesAtZoom(currentZoom, null, [], [], 0);
-        }
-        const tiles = [];
-        for (const sample of samples) {
-            tiles.push(this._provider.tileFromSpherical(currentZoom, sample));
-        }
-        return this._provider.deduplicateTiles(tiles);
-    }
-    buildCoverageTiles(currentZoom, input, coreTiles) {
-        if (coreTiles.length === 0) {
-            return [];
-        }
-        const ring = this.getNeighborRing(currentZoom, input.fovDeg ?? 180);
-        if (ring <= 0) {
-            return [];
-        }
-        const coreSet = new Set(coreTiles.map((tile) => this.key(tile)));
-        const coverageTiles = [];
-        for (const tile of coreTiles) {
-            if (!this.isBoundaryTile(tile, coreSet)) {
-                continue;
-            }
-            const neighbors = this._provider.getNeighborTiles(tile, ring);
-            for (const neighbor of neighbors) {
-                const neighborKey = this.key(neighbor);
-                if (coreSet.has(neighborKey)) {
-                    continue;
-                }
-                coverageTiles.push(neighbor);
-            }
-        }
-        return this._provider.deduplicateTiles(coverageTiles);
-    }
-    collectCoverageSamples(input) {
-        const samples = [];
-        if (input.centerSphericalDeg) {
-            samples.push(input.centerSphericalDeg);
-        }
-        for (const sample of input.viewportSphericalSamples ?? []) {
-            samples.push(sample);
-        }
-        const polygonSamples = this.interpolateFoVPolygon(input.fovPolygon ?? []);
-        for (const sample of polygonSamples) {
-            samples.push(sample);
-        }
-        return samples;
-    }
-    interpolateFoVPolygon(fovPolygon) {
-        if (fovPolygon.length === 0) {
-            return [];
-        }
-        const polygonSpherical = fovPolygon.map((point) => ({
-            phi: point.raDeg < 0 ? point.raDeg + 360 : point.raDeg,
-            theta: 90 - point.decDeg,
-        }));
-        const samples = [...polygonSpherical];
-        const segmentInterpolationCount = polygonSpherical.length >= 4 ? 3 : 1;
-        for (let i = 0; i < polygonSpherical.length; i++) {
-            const start = polygonSpherical[i];
-            const end = polygonSpherical[(i + 1) % polygonSpherical.length];
-            if (!start || !end)
-                continue;
-            const startPhi = this.normalizePhi(start.phi);
-            let endPhi = this.normalizePhi(end.phi);
-            if (Math.abs(endPhi - startPhi) > 180) {
-                endPhi += endPhi > startPhi ? -360 : 360;
-            }
-            for (let step = 1; step <= segmentInterpolationCount; step++) {
-                const t = step / (segmentInterpolationCount + 1);
-                const phi = this.normalizePhi(startPhi + (endPhi - startPhi) * t);
-                const theta = start.theta + (end.theta - start.theta) * t;
-                samples.push({ phi, theta });
-            }
-        }
-        return samples;
-    }
-    getNeighborRing(currentZoom, fovDeg) {
-        if (currentZoom >= 14 && fovDeg < 10) {
-            return 0;
-        }
-        return 1;
-    }
-    isBoundaryTile(tile, coreTileKeys) {
-        const directNeighbors = [
-            { z: tile.z, x: tile.x - 1, y: tile.y },
-            { z: tile.z, x: tile.x + 1, y: tile.y },
-            { z: tile.z, x: tile.x, y: tile.y - 1 },
-            { z: tile.z, x: tile.x, y: tile.y + 1 },
-        ];
-        return directNeighbors.some((neighbor) => !coreTileKeys.has(this.key(this.normalizeTile(neighbor))));
-    }
-    normalizeTile(tile) {
-        const dim = 2 ** tile.z;
-        return {
-            z: tile.z,
-            x: ((tile.x % dim) + dim) % dim,
-            y: Math.max(0, Math.min(dim - 1, tile.y)),
-        };
-    }
-    normalizePhi(phi) {
-        let value = phi;
-        while (value < 0)
-            value += 360;
-        while (value >= 360)
-            value -= 360;
-        return value;
-    }
-    buildFallbackMap(currentTiles, currentZoom) {
-        const fallbackMap = new Map();
-        const minFallbackZoom = Math.max(this._provider.minZoom, currentZoom - 2);
-        for (let z = currentZoom - 1; z >= minFallbackZoom; z--) {
-            const dz = currentZoom - z;
-            for (const tile of currentTiles) {
-                const fallback = {
+        return this._selection;
+    }
+    refreshAncestorsMap(visibleTiles) {
+        this._ancestorsMap.clear();
+        for (const tile of visibleTiles) {
+            for (let z = tile.z - 1; z >= 0; z--) {
+                const dz = tile.z - z;
+                const ancestor = {
                     z,
                     x: tile.x >> dz,
                     y: tile.y >> dz,
                 };
-                fallbackMap.set(`${fallback.z}/${fallback.x}/${fallback.y}`, fallback);
+                this._ancestorsMap.set(`${ancestor.z}/${ancestor.x}/${ancestor.y}`, ancestor);
             }
         }
-        return fallbackMap;
     }
-    buildFallbackSeedTiles(coreTiles, zoom, centerSphericalDeg) {
-        if (coreTiles.length === 0) {
-            return [];
-        }
-        const centerTile = this.getCenterTileCoord(zoom, centerSphericalDeg);
-        if (!centerTile) {
-            return coreTiles;
+    buildTileMap(tiles) {
+        const map = new Map();
+        for (const tile of tiles) {
+            map.set(this.key(tile), tile);
         }
-        const centerKey = this.key(centerTile);
-        if (coreTiles.some((tile) => this.key(tile) === centerKey)) {
-            return coreTiles;
-        }
-        return [...coreTiles, centerTile];
-    }
-    orderTilesByScreenRelevance(tiles, zoom, centerSphericalDeg) {
-        const centerTile = this.getCenterTileCoord(zoom, centerSphericalDeg);
-        if (!centerTile) {
-            return tiles;
-        }
-        return [...tiles].sort((a, b) => {
-            const distanceA = Math.abs(a.x - centerTile.x) + Math.abs(a.y - centerTile.y);
-            const distanceB = Math.abs(b.x - centerTile.x) + Math.abs(b.y - centerTile.y);
-            return distanceA - distanceB;
-        });
-    }
-    orderFallbackTiles(tiles, currentZoom, centerSphericalDeg) {
-        return [...tiles].sort((a, b) => {
-            if (b.z !== a.z) {
-                return b.z - a.z;
-            }
-            const centerTileA = this.getCenterTileCoord(a.z, centerSphericalDeg);
-            const centerTileB = this.getCenterTileCoord(b.z, centerSphericalDeg);
-            if (!centerTileA || !centerTileB) {
-                return 0;
-            }
-            const distanceA = Math.abs(a.x - centerTileA.x) + Math.abs(a.y - centerTileA.y);
-            const distanceB = Math.abs(b.x - centerTileB.x) + Math.abs(b.y - centerTileB.y);
-            return distanceA - distanceB || currentZoom - a.z - (currentZoom - b.z);
-        });
+        return map;
     }
-    getCenterTileCoord(zoom, centerSphericalDeg) {
-        if (!centerSphericalDeg) {
-            return null;
-        }
-        const lonDeg = centerSphericalDeg.phi > 180 ? centerSphericalDeg.phi - 360 : centerSphericalDeg.phi;
-        const latDeg = 90 - centerSphericalDeg.theta;
-        const dim = 2 ** zoom;
-        const x = Math.floor(((lonDeg + 180) / 360) * dim);
-        const latRad = (Math.max(-85.0511287798066, Math.min(85.0511287798066, latDeg)) * Math.PI) / 180;
-        const y = Math.floor(((1 - Math.asinh(Math.tan(latRad)) / Math.PI) / 2) * dim);
-        return {
-            z: zoom,
-            x: ((x % dim) + dim) % dim,
-            y: Math.max(0, Math.min(dim - 1, y)),
-        };
+    buildSelectionKey(z, tiles) {
+        return `${z}:${tiles.map((tile) => `${tile.x}/${tile.y}`).join('|')}`;
     }
     key(tile) {
         return `${tile.z}/${tile.x}/${tile.y}`;

package/lib-esm/model/footprints/Footprint.js

@@ -1,3 +1,15 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
 'use strict';
 /**
  * @author Fabrizio Giordano (Fab)

package/lib-esm/model/footprints/FootprintProps.js

@@ -1,6 +1,18 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
+export {};
 // import {Metadata} from '../tap/TapMetadata.js';
 // import {TapMetadataList} from '../tap/TapMetadataList.js';
-export {};
 // export default class FootprintProps {
 //   // resolved columns
 //   pgSphereColumn?: Metadata;

package/lib-esm/model/footprints/FootprintSetGL.js

@@ -1,3 +1,15 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
 import { Footprint } from "./Footprint.js";
 import { colorHex2RGB } from "../../utils/Utils.js";
 import { FootprintShaderProgram } from "../../shader/FootprintShaderProgram.js";

package/lib-esm/model/grid/EquatorialGrid.js

@@ -1,3 +1,15 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { vec4, mat4 } from 'gl-matrix';
 import { fovHelper } from '../hips/FoVHelper.js';
@@ -19,7 +31,7 @@ export class EquatorialGrid extends AbstractSkyEntity {
     _vertexShader;
     _fragmentShader;
     defaultColor = '#41d421';
-    gridText = new GridTextHelper();
+    gridText = new GridTextHelper('equatorial');
     _attribLocations = {
         position: 0,
         selected: 1,
@@ -260,9 +272,10 @@ export class EquatorialGrid extends AbstractSkyEntity {
                         // perspective divide
                         clipspace[0] /= clipspace[3];
                         clipspace[1] /= clipspace[3];
-                        // clip->pixel
-                        const pixelX = (clipspace[0] * 0.5 + 0.5) * super.webgl.canvas.width;
-                        const pixelY = (clipspace[1] * -0.5 + 0.5) * super.webgl.canvas.height;
+                        // clip -> CSS pixels
+                        const canvasRect = super.webgl.canvas.getBoundingClientRect();
+                        const pixelX = canvasRect.left + (clipspace[0] * 0.5 + 0.5) * canvasRect.width;
+                        const pixelY = canvasRect.top + (clipspace[1] * -0.5 + 0.5) * canvasRect.height;
                         this.gridText.addEqDivSet(decDeg.toFixed(2), pixelX, pixelY, 'dec');
                         // gridTextHelper.addEqDivSet(decDeg.toFixed(2), pixelX, pixelY, 'dec');
                     }
@@ -283,8 +296,9 @@ export class EquatorialGrid extends AbstractSkyEntity {
                         vec4.transformMat4(clipspace, phiPoint, mvpMatrix);
                         clipspace[0] /= clipspace[3];
                         clipspace[1] /= clipspace[3];
-                        const pixelX = (clipspace[0] * 0.5 + 0.5) * super.webgl.canvas.width;
-                        const pixelY = (clipspace[1] * -0.5 + 0.5) * super.webgl.canvas.height;
+                        const canvasRect = super.webgl.canvas.getBoundingClientRect();
+                        const pixelX = canvasRect.left + (clipspace[0] * 0.5 + 0.5) * canvasRect.width;
+                        const pixelY = canvasRect.top + (clipspace[1] * -0.5 + 0.5) * canvasRect.height;
                         // gridTextHelper.addEqDivSet(raDeg.toFixed(2), pixelX, pixelY, 'ra');
                         this.gridText.addEqDivSet(raDeg.toFixed(2), pixelX, pixelY, 'ra');
                     }

package/lib-esm/model/grid/GridTextHelper.d.ts

@@ -1,25 +1,16 @@
-/**
- * @author Fabrizio Giordano (Fab)
- * @param in_radius - number
- * @param in_gl - GL context
- * @param in_position - array of double e.g. [0.0, 0.0, 0.0]
- */
+type GridLabelLayer = 'healpix' | 'equatorial' | 'lonlat';
 declare class GridTextHelper {
-    private _divEqContainerElement;
-    private _divHPXContainerElement;
-    private _divSets;
-    private _divSetNdx;
-    constructor();
+    private static layers;
+    private layer;
+    constructor(layer?: GridLabelLayer);
     initHtml(): void;
-    resetDivSets(): void;
-    /**
-     * Add / reuse a floating label for HPX coordinates
-     */
+    resetDivSets(layer?: GridLabelLayer): void;
     addHPXDivSet(msg: string, x: number, y: number): void;
-    /**
-     * Add / reuse a floating label for Equatorial coords
-     * @param type 'ra' or 'dec'
-     */
     addEqDivSet(msg: string, x: number, y: number, type: 'ra' | 'dec'): void;
+    addLonLatDivSet(msg: string, x: number, y: number, type: 'lon' | 'lat'): void;
+    private addLabel;
+    private classNameForKind;
+    private static getLayerState;
+    private static resolveContainer;
 }
 export default GridTextHelper;

package/lib-esm/model/grid/GridTextHelper.js

@@ -1,91 +1,94 @@
-/**
- * @author Fabrizio Giordano (Fab)
- * @param in_radius - number
- * @param in_gl - GL context
- * @param in_position - array of double e.g. [0.0, 0.0, 0.0]
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
  */
 class GridTextHelper {
-    _divEqContainerElement;
-    _divHPXContainerElement;
-    _divSets;
-    _divSetNdx;
-    constructor() {
-        this._divEqContainerElement = document.querySelector('#gridcoords');
-        this._divHPXContainerElement = document.querySelector('#gridhpx');
-        this._divSetNdx = 0;
-        this._divSets = [];
+    static layers = new Map();
+    layer;
+    constructor(layer = 'equatorial') {
+        this.layer = layer;
+        GridTextHelper.getLayerState(layer);
     }
     initHtml() {
-        // Kept for API parity; nothing required here with current logic.
+        GridTextHelper.getLayerState(this.layer);
     }
-    resetDivSets() {
-        // Hide remaining divs and reset index
-        for (; this._divSetNdx < this._divSets.length; ++this._divSetNdx) {
-            this._divSets[this._divSetNdx].style.display = 'none';
+    resetDivSets(layer = this.layer) {
+        const state = GridTextHelper.getLayerState(layer);
+        for (; state.divSetNdx < state.divSets.length; ++state.divSetNdx) {
+            state.divSets[state.divSetNdx].style.display = 'none';
         }
-        this._divSetNdx = 0;
+        state.divSetNdx = 0;
     }
-    /**
-     * Add / reuse a floating label for HPX coordinates
-     */
     addHPXDivSet(msg, x, y) {
-        let divSet = this._divSets[this._divSetNdx++];
-        // Create on demand
+        this.addLabel('healpix', msg, x + 25, y, 'hpx');
+    }
+    addEqDivSet(msg, x, y, type) {
+        this.addLabel('equatorial', msg, type === 'ra' ? x + 25 : x, type === 'ra' ? y : y + 25, type);
+    }
+    addLonLatDivSet(msg, x, y, type) {
+        this.addLabel('lonlat', msg, type === 'lon' ? x + 25 : x, type === 'lon' ? y : y + 25, type);
+    }
+    addLabel(layer, msg, x, y, kind) {
+        const state = GridTextHelper.getLayerState(layer);
+        if (!state.container)
+            return;
+        let divSet = state.divSets[state.divSetNdx++];
         if (!divSet) {
             const div = document.createElement('div');
             const textNode = document.createTextNode('');
-            div.className = 'floating-div-ra'; // style like RA tags
             div.appendChild(textNode);
-            if (!this._divHPXContainerElement) {
-                this._divHPXContainerElement = document.querySelector('#gridhpx');
-            }
-            if (!this._divHPXContainerElement) {
-                // If container is still missing, abort gracefully
-                return;
-            }
-            this._divHPXContainerElement.appendChild(div);
+            state.container.appendChild(div);
             divSet = { div, textNode, style: div.style };
-            this._divSets.push(divSet);
+            state.divSets.push(divSet);
         }
-        // Show & position
+        divSet.div.className = this.classNameForKind(kind);
         divSet.style.display = 'block';
-        divSet.style.left = `${Math.floor(x + 25)}px`;
+        divSet.style.left = `${Math.floor(x)}px`;
         divSet.style.top = `${Math.floor(y)}px`;
         divSet.textNode.nodeValue = msg;
     }
-    /**
-     * Add / reuse a floating label for Equatorial coords
-     * @param type 'ra' or 'dec'
-     */
-    addEqDivSet(msg, x, y, type) {
-        let divSet = this._divSets[this._divSetNdx++];
-        if (!divSet) {
-            const div = document.createElement('div');
-            const textNode = document.createTextNode('');
-            div.className = type === 'ra' ? 'floating-div-ra' : 'floating-div-dec';
-            div.appendChild(textNode);
-            if (!this._divEqContainerElement) {
-                this._divEqContainerElement = document.querySelector('#gridcoords');
-            }
-            if (!this._divEqContainerElement) {
-                // If container is still missing, abort gracefully
-                return;
-            }
-            this._divEqContainerElement.appendChild(div);
-            divSet = { div, textNode, style: div.style };
-            this._divSets.push(divSet);
+    classNameForKind(kind) {
+        switch (kind) {
+            case 'dec':
+                return 'floating-div-dec';
+            case 'lat':
+                return 'floating-div-lat';
+            case 'lon':
+                return 'floating-div-lon';
+            case 'hpx':
+            case 'ra':
+            default:
+                return 'floating-div-ra';
         }
-        divSet.style.display = 'block';
-        if (type === 'ra') {
-            divSet.style.left = `${Math.floor(x + 25)}px`;
-            divSet.style.top = `${Math.floor(y)}px`;
+    }
+    static getLayerState(layer) {
+        const current = GridTextHelper.layers.get(layer);
+        if (current) {
+            if (!current.container)
+                current.container = GridTextHelper.resolveContainer(layer);
+            return current;
         }
-        else {
-            divSet.style.left = `${Math.floor(x)}px`;
-            divSet.style.top = `${Math.floor(y + 25)}px`;
+        const state = {
+            container: GridTextHelper.resolveContainer(layer),
+            divSets: [],
+            divSetNdx: 0,
+        };
+        GridTextHelper.layers.set(layer, state);
+        return state;
+    }
+    static resolveContainer(layer) {
+        if (layer === 'healpix') {
+            return document.querySelector('#gridhpx');
         }
-        divSet.textNode.nodeValue = msg;
+        return document.querySelector('#gridcoords');
     }
 }
-// export const gridTextHelper = new GridTextHelper();
 export default GridTextHelper;

package/lib-esm/model/grid/HealpixGrid.d.ts

@@ -1,6 +1,6 @@
 import { AbstractSkyEntity, SkyEntityDrawInput } from '../AbstractSkyEntity.js';
 import { ReadonlyMat4 } from 'gl-matrix';
-import { FoV } from '../FoV.js';
+import { SphereFoV } from '../SphereFoV.js';
 import { VisibleTilesManager } from '../hips/VisibleTilesManager.js';
 import Camera from '../../Camera.js';
 export declare class HealpixGrid extends AbstractSkyEntity {
@@ -28,13 +28,13 @@ export declare class HealpixGrid extends AbstractSkyEntity {
     private _visibleTilesManager;
     constructor(webgl: WebGL2RenderingContext);
     init(): void;
-    get fovObj(): FoV;
+    get fovObj(): SphereFoV;
     get RADIUS(): number;
     get INITIAL_POSITION(): [number, number, number];
     get INITIAL_PhiRad(): number;
     get INITIAL_ThetaRad(): number;
-    refreshFoV(camera: Camera, pMatrix: ReadonlyMat4): FoV;
-    getFoV(): FoV;
+    refreshFoV(camera: Camera, pMatrix: ReadonlyMat4): SphereFoV;
+    getFoV(): SphereFoV;
     getMinFoV(): number;
     private initShaders;
     initBuffers(pixels: number[], order: number): void;

package/lib-esm/model/grid/HealpixGrid.js

@@ -1,10 +1,22 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
 'use strict';
 import { AbstractSkyEntity } from '../AbstractSkyEntity.js';
 import global from '../../Global.js';
 import { mat4, vec4 } from 'gl-matrix';
 import { fovHelper } from '../hips/FoVHelper.js';
 import { FoVUtils } from '../../utils/FoVUtils.js';
-import { FoV } from '../FoV.js';
+import { SphereFoV } from '../SphereFoV.js';
 import { CoordsType } from '../../utils/CoordsType.js';
 import { Point } from '../Point.js';
 import GridShaderManager from '../../shader/GridShaderManager.js';
@@ -22,7 +34,7 @@ export class HealpixGrid extends AbstractSkyEntity {
     fragmentShader;
     vertexShader;
     defaultColor = '#ec0acaff';
-    gridText = new GridTextHelper();
+    gridText = new GridTextHelper('healpix');
     // private _hipsShaderProgram: HiPSShaderProgram
     _attribLocations = {
         position: 0,
@@ -59,7 +71,7 @@ export class HealpixGrid extends AbstractSkyEntity {
         this._vertexCataloguePositionBuffer = super.webgl.createBuffer();
         this._indexBuffer = super.webgl.createBuffer();
         this._vertexCataloguePosition = new Float32Array(0);
-        this._fovObj = new FoV(super.webgl);
+        this._fovObj = new SphereFoV(super.webgl);
     }
     get fovObj() {
         return this._fovObj;
@@ -288,9 +300,10 @@ export class HealpixGrid extends AbstractSkyEntity {
                 // NDC divide
                 clipspace[0] /= clipspace[3];
                 clipspace[1] /= clipspace[3];
-                // clip → pixels
-                const pixelX = (clipspace[0] * 0.5 + 0.5) * gl.canvas.width;
-                const pixelY = (clipspace[1] * -0.5 + 0.5) * gl.canvas.height;
+                // clip -> CSS pixels
+                const canvasRect = gl.canvas.getBoundingClientRect();
+                const pixelX = canvasRect.left + (clipspace[0] * 0.5 + 0.5) * canvasRect.width;
+                const pixelY = canvasRect.top + (clipspace[1] * -0.5 + 0.5) * canvasRect.height;
                 this.gridText.addHPXDivSet(this._visibleorder + '/' + pixels[p], pixelX, pixelY);
                 // gridTextHelper.addHPXDivSet(this._visibleorder + '/' + pixels[p], pixelX, pixelY);
             }