itowns icon indicating copy to clipboard operation
itowns copied to clipboard

Published 20 hours ago • verified publisher icon iTowns

[BUG] Label2DRenderer is not overlayed over canvas correctly

Open HoloTheDrunk opened this issue 11 months ago • 0 comments

Your Environment

  • Version used: commit 9fa4cde79b138548c5b897ea78bd2a88d0946029
  • Browser Name and version: Firefox 123.0 (64-bit)
  • Operating System and version (desktop or mobile): Ubuntu 22.04.4 LTS x86_64
  • Link to your project: https://github.com/HoloTheDrunk/cloud-measure (likely won't build, still in dev)

Context

The Label2DRenderer does not have the same dimensions as the canvas and can overflow, catching inputs for the view outside of it in areas of the screen visually outside of it. Div containing both canvas and Label2DRenderer dom element: image The actual Label2DRenderer dom element: image

Steps to Reproduce (for bugs)

HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body style="display: flex; flex-direction: row; height: 100vh; margin: auto">
        <div id="viewerDiv" style="flex: 4; width: 100%"></div>
        <div style="flex: 1; background-color: red; width: 100%"></div>
    </body>
</html>

TypeScript:

import * as itowns from "itowns";
import * as three from "three";
import proj4 from "proj4";

const viewerDiv = document.getElementById("viewerDiv") as HTMLDivElement;

proj4.defs(
    "EPSG:3946",
    "+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs",
);

const view = new itowns.View("EPSG:3946", viewerDiv);
view.mainLoop.gfxEngine.renderer.setClearColor(three.Color.NAMES.black, 1.0);

const controls = new itowns.PlanarControls(view as itowns.PlanarView);

let eptSource: itowns.EntwinePointTileSource;
let eptLayer: itowns.EntwinePointTileLayer;

function onLayerReady() {
    const lookAt = new three.Vector3();
    const size = new three.Vector3();
    eptLayer.root.bbox.getSize(size);
    eptLayer.root.bbox.getCenter(lookAt);

    (view.camera3D as three.PerspectiveCamera).far = size.length() * 2.0;

    controls.groundLevel = eptLayer.root.bbox.min.z;
    const position = eptLayer.root.bbox.min
        .clone()
        .add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));

    view.camera3D.position.copy(position);
    view.camera3D.lookAt(lookAt);
    (view.camera3D as itowns.OrientedImageCamera).updateProjectionMatrix();

    view.notifyChange(view.camera3D);
}

function loadEPT(url: string) {
    eptSource = new itowns.EntwinePointTileSource({ url });

    if (eptLayer) {
        view.removeLayer("Entwine Point Tile");
        view.notifyChange();
        eptLayer.delete();
    }

    const config = {
        source: eptSource,
        crs: view.referenceCrs,
    };

    eptLayer = new itowns.EntwinePointTileLayer("Entwine Point Tile", config);

    view.addLayer(eptLayer).then(onLayerReady);
}

loadEPT(
    "https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/",
);

Expected Behavior

The Label2DRenderer should have the same size as the canvas.

Actual Behavior

The Label2DRenderer is not the same size as the canvas, leading to capture of inputs outside of the view.

Possible Cause/Fix/Solution

Might have something to do with the use of flex boxes.

HoloTheDrunk avatar Mar 21 '24 16:03 HoloTheDrunk