itowns 2.43.2-next.2 → 2.43.2-next.20

package/examples/js/plugins/COGParser.js

@@ -22,10 +22,8 @@
  * @returns {GeoTIFFLevel} The selected zoom level.
  */
 function selectLevel(source, requestExtent, requestWidth, requestHeight) {
-    // Number of images  = original + overviews if any
-    const cropped = requestExtent.clone().intersect(source.extent);
     // Dimensions of the requested extent
-    const extentDimension = cropped.planarDimensions();
+    const extentDimension = requestExtent.clone().planarDimensions();
 
     const targetResolution = Math.min(
         extentDimension.x / requestWidth,
@@ -87,70 +85,112 @@ function makeWindowFromExtent(source, extent, resolution) {
 }
 
 /**
- * Creates a texture from the pixel buffer(s).
+ * Reads raster data from the image as RGB.
+ * The result is always an interleaved typed array.
+ * Colorspaces other than RGB will be transformed to RGB, color maps expanded.
+ *
+ * @param {Source} source The COGSource.
+ * @param {GeoTIFFLevel} level The GeoTIFF level to read
+ * @param {number[]} viewport The image region to read.
+ * @returns {Promise<TypedArray[]>} The raster data
+ */
+async function readRGB(source, level, viewport) {
+    try {
+        // TODO possible optimization: instead of letting geotiff.js crop and resample
+        // the tiles into the desired region, we could use image.getTileOrStrip() to
+        // read individual tiles (aka blocks) and make a texture per block. This way,
+        // there would not be multiple concurrent reads for the same block, and we would not
+        // waste time resampling the blocks since resampling is already done in the composer.
+        // We would create more textures, but it could be worth it.
+        return await level.image.readRGB({
+            window: viewport,
+            pool: source.pool,
+            width: source.tileWidth,
+            height: source.tileHeight,
+            resampleMethod: source.resampleMethod,
+            enableAlpha: true,
+            interleave: true,
+        });
+    } catch (error) {
+        if (error.toString() === 'AggregateError: Request failed') {
+            // Problem with the source that is blocked by another fetch
+            // (request failed in readRasters). See the conversations in
+            // https://github.com/geotiffjs/geotiff.js/issues/218
+            // https://github.com/geotiffjs/geotiff.js/issues/221
+            // https://github.com/geotiffjs/geotiff.js/pull/224
+            // Retry until it is not blocked.
+            // TODO retry counter
+            await new Promise((resolve) => {
+                setTimeout(resolve, 100);
+            });
+            return readRGB(level, viewport, source);
+        }
+        throw error;
+    }
+}
+
+/**
+ * Creates a texture from the pixel buffer
  *
  * @param {Object} source The COGSource
- * @param {THREE.TypedArray | THREE.TypedArray[]} buffers The buffers (one buffer per band)
- * @param {number} buffers.width
- * @param {number} buffers.height
- * @param {number} buffers.byteLength
+ * @param {THREE.TypedArray[]} buffer The pixel buffer
+ * @param {number} buffer.width
+ * @param {number} buffer.height
+ * @param {number} buffer.byteLength
  * @returns {THREE.DataTexture} The generated texture.
  */
-function createTexture(source, buffers) {
-    const { width, height, byteLength } = buffers;
+function createTexture(source, buffer) {
+    const { byteLength } = buffer;
+    const width = source.tileWidth;
+    const height = source.tileHeight;
     const pixelCount = width * height;
     const targetDataType = source.dataType;
     const format = THREE.RGBAFormat;
     const channelCount = 4;
-    let texture;
-    let data;
-
-    // Check if it's a RGBA buffer
-    if (pixelCount * channelCount === byteLength) {
-        data = buffers;
-    }
+    const isRGBA = pixelCount * channelCount === byteLength;
+    let tmpBuffer = buffer;
 
     switch (targetDataType) {
         case THREE.UnsignedByteType: {
-            if (!data) {
-                // We convert RGB buffer to RGBA
-                const newBuffers = new Uint8ClampedArray(pixelCount * channelCount);
-                data = convertToRGBA(buffers, newBuffers, source.defaultAlpha);
+            if (!isRGBA) {
+                tmpBuffer = convertToRGBA(tmpBuffer, new Uint8ClampedArray(pixelCount * channelCount), source.defaultAlpha);
             }
-            texture = new THREE.DataTexture(data, width, height, format, THREE.UnsignedByteType);
-            break;
+            return new THREE.DataTexture(tmpBuffer, width, height, format, THREE.UnsignedByteType);
         }
         case THREE.FloatType: {
-            if (!data) {
-                // We convert RGB buffer to RGBA
-                const newBuffers = new Float32Array(pixelCount * channelCount);
-                data = convertToRGBA(buffers, newBuffers, source.defaultAlpha / 255);
+            if (!isRGBA) {
+                tmpBuffer = convertToRGBA(tmpBuffer, new Float32Array(pixelCount * channelCount), source.defaultAlpha / 255);
             }
-            texture = new THREE.DataTexture(data, width, height, format, THREE.FloatType);
-            break;
+            return new THREE.DataTexture(tmpBuffer, width, height, format, THREE.FloatType);
         }
         default:
             throw new Error('unsupported data type');
     }
-
-    return texture;
 }
 
-function convertToRGBA(buffers, newBuffers, defaultAlpha) {
-    const { width, height } = buffers;
+/**
+ * Convert RGB pixel buffer to RGBA pixel buffer
+ *
+ * @param {THREE.TypedArray[]} buffer The RGB pixel buffer
+ * @param {THREE.TypedArray[]} newBuffer The empty RGBA pixel buffer
+ * @param {number} defaultAlpha Default alpha value
+ * @returns {THREE.DataTexture} The generated texture.
+ */
+function convertToRGBA(buffer, newBuffer, defaultAlpha) {
+    const { width, height } = buffer;
 
     for (let i = 0; i < width * height; i++) {
         const oldIndex = i * 3;
         const index = i * 4;
         // Copy RGB from original buffer
-        newBuffers[index + 0] = buffers[oldIndex + 0]; // R
-        newBuffers[index + 1] = buffers[oldIndex + 1]; // G
-        newBuffers[index + 2] = buffers[oldIndex + 2]; // B
+        newBuffer[index + 0] = buffer[oldIndex + 0]; // R
+        newBuffer[index + 1] = buffer[oldIndex + 1]; // G
+        newBuffer[index + 2] = buffer[oldIndex + 2]; // B
         // Add alpha to new buffer
-        newBuffers[index + 3] = defaultAlpha; // A
+        newBuffer[index + 3] = defaultAlpha; // A
     }
 
-    return newBuffers;
+    return newBuffer;
 }
 
 /**
@@ -195,20 +235,14 @@ const COGParser = (function _() {
          */
         parse: async function _(data, options) {
             const source = options.in;
-            const nodeExtent = data.extent.as(source.crs);
-            const level = selectLevel(source, nodeExtent, source.tileWidth, source.tileHeight);
-            const viewport = makeWindowFromExtent(source, nodeExtent, level.resolution);
-
-            const buffers = await level.image.readRGB({
-                window: viewport,
-                pool: source.pool,
-                enableAlpha: true,
-                interleave: true,
-            });
+            const tileExtent = options.extent.as(source.crs);
 
-            const texture = createTexture(source, buffers);
+            const level = selectLevel(source, tileExtent, source.tileWidth, source.tileHeight);
+            const viewport = makeWindowFromExtent(source, tileExtent, level.resolution);
+            const rgbBuffer = await readRGB(source, level, viewport);
+            const texture = createTexture(source, rgbBuffer);
             texture.flipY = true;
-            texture.extent = data.extent;
+            texture.extent = options.extent;
             texture.needsUpdate = true;
             texture.magFilter = THREE.LinearFilter;
             texture.minFilter = THREE.LinearFilter;

package/examples/js/plugins/COGSource.js

@@ -15,6 +15,9 @@
  * @property {string} url - The URL of the COG.
  * @property {GeoTIFF.Pool} pool - Pool use to decode GeoTiff.
  * @property {number} defaultAlpha - Alpha byte value used if no alpha is present in COG. Default value is 255.
+ * @property {number} tileWidth - Tile width in pixels. Default value use 'geotiff.getTileWidth()'.
+ * @property {number} tileHeight - Tile height in pixels. Default value use 'geotiff.getTileHeight()'.
+ * @property {number} resampleMethod - The desired resampling method. Default is 'nearest'.
  *
  * @example
  * // Create the source
@@ -59,9 +62,9 @@ class COGSource extends itowns.Source {
                 this.firstImage = await geotiff.getImage();
                 this.origin = this.firstImage.getOrigin();
                 this.dataType = this.selectDataType(this.firstImage.getSampleFormat(), this.firstImage.getBitsPerSample());
-
-                this.tileWidth = this.firstImage.getTileWidth();
-                this.tileHeight = this.firstImage.getTileHeight();
+                this.tileWidth = source.tileWidth || this.firstImage.getTileWidth();
+                this.tileHeight = source.tileHeight || this.firstImage.getTileHeight();
+                this.resampleMethod = source.resampleMethod || 'nearest';
 
                 // Compute extent
                 const [minX, minY, maxX, maxY] = this.firstImage.getBoundingBox();
@@ -80,7 +83,7 @@ class COGSource extends itowns.Source {
                         .then(image => this.makeLevel(image, image.getResolution(this.firstImage)));
                     promises.push(promise);
                 }
-                this.levels.push(await Promise.all(promises));
+                this.levels = this.levels.concat(await Promise.all(promises));
             });
     }
 

package/examples/layers/JSONLayers/OPENSM.json

@@ -4,7 +4,7 @@
         "crs": "EPSG:3857",
         "isInverted": true,
         "format": "image/png",
-        "url": "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png",
+        "url": "https://maps.pole-emploi.fr/styles/klokantech-basic/${z}/${x}/${y}.png",
         "attribution": {
             "name":"OpenStreetMap",
             "url": "http://www.openstreetmap.org/"

package/examples/potree2_25d_map.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Point Cloud Viewer</title>
+
+        <style type="text/css">
+            #info {
+                color: #7ad7ff;
+                font-family: 'Open Sans', sans-serif;
+                position: absolute;
+                top: 0;
+                left: 0;
+                padding: 0.3rem;
+                background-color: #404040;
+                z-index: 1;
+            }
+            @media (max-width: 600px) {
+                #info,
+                .dg {
+                    display: none;
+                }
+            }
+        </style>
+
+        <meta charset="UTF-8">
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="viewerDiv">
+            <div id="info"></div>
+        </div>
+
+        <div>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+            <script src="../dist/itowns.js"></script>
+            <script src="js/GUI/LoadingScreen.js"></script>
+            <script src="../dist/debug.js"></script>
+            <script type="text/javascript">
+                var potreeLayer;
+                var oldPostUpdate;
+                var viewerDiv;
+                var debugGui;
+                var view;
+                var controls;
+
+                // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
+                itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+
+                viewerDiv = document.getElementById('viewerDiv');
+                viewerDiv.style.display = 'block';
+
+                debugGui = new dat.GUI();
+
+                // TODO: do we really need to disable logarithmicDepthBuffer ?
+                view = new itowns.View('EPSG:3946', viewerDiv);
+                setupLoadingScreen(viewerDiv, view);
+                view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
+
+                // Configure Point Cloud layer
+                potreeLayer = new itowns.Potree2Layer('Lion', {
+                    source: new itowns.Potree2Source({
+                        file: 'metadata.json',
+                        url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/potree2.0/lion',
+                        crs: view.referenceCrs,
+                    }),
+                });
+
+                // point selection on double-click
+                function dblClickHandler(event) {
+                    var pick = view.pickObjectsAt(event, 5, potreeLayer);
+
+                    for (const p of pick) {
+                        console.info('Selected point #' + p.index + ' in position (' +
+                            p.object.position.x + ', ' +
+                            p.object.position.y + ', ' +
+                            p.object.position.z +
+                         ') in Points ' + p.object.layer.id);
+                    }
+                }
+                view.domElement.addEventListener('dblclick', dblClickHandler);
+
+                function placeCamera(position, lookAt) {
+                    view.camera.camera3D.position.copy(position);
+                    view.camera.camera3D.lookAt(lookAt);
+                    // create controls
+                    controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
+                    debugGui.add(controls.options, 'moveSpeed', 1, 100).name('Movement speed');
+
+                    view.notifyChange(view.camera.camera3D);
+                }
+
+                // add potreeLayer to scene
+                function onLayerReady() {
+                    var ratio;
+                    var position;
+                    var lookAt = new itowns.THREE.Vector3();
+                    var size = new itowns.THREE.Vector3();
+
+                    potreeLayer.root.bbox.getSize(size);
+                    potreeLayer.root.bbox.getCenter(lookAt);
+
+                    debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);
+
+                    view.camera.camera3D.far = 2.0 * size.length();
+
+                    ratio = size.x / size.z;
+                    position = potreeLayer.root.bbox.min.clone().add(
+                        size.multiply({ x: 0, y: 0, z: ratio * 0.5 }));
+                    lookAt.z = potreeLayer.root.bbox.min.z;
+                    placeCamera(position, lookAt);
+                    controls.moveSpeed = size.length() / 3;
+
+                    // update stats window
+                    var info = document.getElementById('info');
+                    view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
+                        info.textContent = potreeLayer.displayedCount.toLocaleString() + ' points';
+                    });
+                }
+                window.view = view;
+                view.addLayer(potreeLayer).then(onLayerReady);
+            </script>
+    </body>
+</html>
+

package/examples/potree_25d_map.html

@@ -102,7 +102,7 @@
                     potreeLayer.root.bbox.getSize(size);
                     potreeLayer.root.bbox.getCenter(lookAt);
 
-                    debug.PotreeDebug.initTools(view, potreeLayer, debugGui);
+                    debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);
 
                     view.camera3D.far = 2.0 * size.length();
 

package/examples/potree_3d_map.html

@@ -71,7 +71,7 @@
 
             // add potreeLayer to scene
             function onLayerReady() {
-                debug.PotreeDebug.initTools(view, potreeLayer, debugGui);
+                debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);
 
                 // update stats window
                 var info = document.getElementById('info');

package/examples/source_file_cog.html

@@ -36,6 +36,7 @@
             itowns.proj4.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
 
             var viewerDiv = document.getElementById('viewerDiv');
+            var view;
 
             function readCOGURL() {
                 var url = document.getElementById('cog_url').value || new URLSearchParams(window.location.search).get('geotiff');
@@ -47,7 +48,7 @@
             }
 
             function loadRGBSample() {
-                document.getElementById('cog_url').value = 'https://cdn.jsdelivr.net/gh/bloc-in-bloc/iTowns2-sample-data@add-cog-sample/cog/orvault.tif';
+                document.getElementById('cog_url').value = 'https://cdn.jsdelivr.net/gh/iTowns/iTowns2-sample-data/cog/nantes/nantes.tif';
                 readCOGURL();
             }
 
@@ -56,17 +57,33 @@
                 readCOGURL();
             }
 
-            function loadCOG(url, crs) {
+            function removeAllChildNodes(parent) {
+                while (parent.firstChild) {
+                    parent.removeChild(parent.firstChild);
+                }
+            }
+
+            function loadCOG(url) {
                 // create a source from a Cloud Optimized GeoTiff
                 var cogSource = new COGSource({
                     url: url,
-                    crs: "EPSG:2154"
+                    crs: "EPSG:2154",
+                    // Default resample method is 'nearest', 'bilinear' looks better when zoomed
+                    resampleMethod: 'bilinear'
                 });
 
                 cogSource.whenReady.then(() => {
-                    var view = new itowns.PlanarView(viewerDiv, cogSource.extent, { disableSkirt: true, placement: { tilt: 90 } });
+                    if (view !== undefined) {
+                        view.dispose(true);
+                        removeAllChildNodes(viewerDiv);
+                    }
+                    view = new itowns.PlanarView(viewerDiv, cogSource.extent, {
+                        // Default maxSubdivisionLevel is 5, so with huge geotiff it's not enough to see details when zoomed
+                        maxSubdivisionLevel: 10,
+                        disableSkirt: true,
+                        placement: { tilt: 90 }
+                    });
                     setupLoadingScreen(viewerDiv, view);
-                    new itowns.PlanarControls(view, {});
                     var cogLayer = new itowns.ColorLayer('cog', {
                         source: cogSource,
                     });

package/lib/Controls/FirstPersonControls.js

@@ -49,7 +49,6 @@ const MOVEMENTS = {
     sign: -1
   } // DOWN: PageDown key
 };
-
 function moveCameraVerticalPlanar(value) {
   this.camera.position.z += value;
 }

package/lib/Controls/FlyControls.js

@@ -45,7 +45,6 @@ const MOVEMENTS = {
     oneshot: true
   } // WHEEL down
 };
-
 function onDocumentMouseDown(event) {
   event.preventDefault();
   this._isMouseDown = true;

package/lib/Converter/Feature2Mesh.js

@@ -416,7 +416,6 @@ function featureToExtrudedPolygon(feature, options) {
       meshColor.toArray(colors, t); // top
       meshColor.multiplyScalar(0.5).toArray(colors, i); // base is half dark
     }
-
     featureId++;
     const geomVertices = vertices.slice(startTop * 3, (end + totalVertices) * 3);
     const holesOffsets = geometry.indices.map(i => i.offset - start).slice(1);
@@ -496,14 +495,13 @@ function pointsToInstancedMeshes(feature) {
  * @return {THREE.Mesh} mesh or GROUP of THREE.InstancedMesh
  */
 function featureToMesh(feature, options) {
-  var _style$point, _style$point$model;
   if (!feature.vertices) {
     return;
   }
   let mesh;
   switch (feature.type) {
     case FEATURE_TYPES.POINT:
-      if ((_style$point = style.point) !== null && _style$point !== void 0 && (_style$point$model = _style$point.model) !== null && _style$point$model !== void 0 && _style$point$model.object) {
+      if (style.point?.model?.object) {
         try {
           mesh = pointsToInstancedMeshes(feature);
           mesh.isInstancedMesh = true;
@@ -592,7 +590,7 @@ export default {
       // style properties (@link StyleOptions) using options.style.
       // This is usually done in some tests and if you want to use Feature2Mesh.convert()
       // as in examples/source_file_gpx_3d.html.
-      style = (this === null || this === void 0 ? void 0 : this.style) || (options.style ? new Style(options.style) : defaultStyle);
+      style = this?.style || (options.style ? new Style(options.style) : defaultStyle);
       context.setCollection(collection);
       const features = collection.features;
       if (!features || features.length == 0) {

package/lib/Converter/textureConverter.js

@@ -21,7 +21,7 @@ export default {
       const backgroundLayer = layer.source.backgroundLayer;
       const backgroundColor = backgroundLayer && backgroundLayer.paint ? new THREE.Color(backgroundLayer.paint['background-color']) : undefined;
       extentDestination.as(CRS.formatToEPSG(layer.crs), extentTexture);
-      texture = Feature2Texture.createTextureFromFeature(data, extentTexture, 256, layer.style, backgroundColor);
+      texture = Feature2Texture.createTextureFromFeature(data, extentTexture, layer.subdivisionThreshold, layer.style, backgroundColor);
       texture.features = data;
       texture.extent = extentDestination;
     } else if (data.isTexture) {

package/lib/Core/3DTiles/C3DTBatchTable.js

@@ -52,7 +52,7 @@ class C3DTBatchTable {
         if (Array.isArray(propVal)) {
           continue;
         }
-        if (typeof (propVal === null || propVal === void 0 ? void 0 : propVal.byteOffset) !== 'undefined' && typeof (propVal === null || propVal === void 0 ? void 0 : propVal.componentType) !== 'undefined' && typeof (propVal === null || propVal === void 0 ? void 0 : propVal.type) !== 'undefined') {
+        if (typeof propVal?.byteOffset !== 'undefined' && typeof propVal?.componentType !== 'undefined' && typeof propVal?.type !== 'undefined') {
           jsonContent[propKey] = binaryPropertyAccessor(binaryBuffer, this.batchLength, propVal.byteOffset, propVal.componentType, propVal.type);
         } else {
           console.error('Invalid 3D Tiles batch table property that is neither a JSON array nor a valid ' + 'accessor to a binary body');

package/lib/Core/3DTiles/C3DTFeature.js

@@ -72,12 +72,12 @@ class C3DTFeature {
     target.min.y = Infinity;
     target.min.z = Infinity;
     this.groups.forEach(group => {
-      const positionIndexStart = group.start * 3;
-      const positionIndexCount = (group.start + group.count) * 3;
-      for (let index = positionIndexStart; index < positionIndexCount; index += 3) {
-        const x = this.object3d.geometry.attributes.position.array[index];
-        const y = this.object3d.geometry.attributes.position.array[index + 1];
-        const z = this.object3d.geometry.attributes.position.array[index + 2];
+      const positionIndexStart = group.start * this.object3d.geometry.attributes.position.itemSize;
+      const positionIndexCount = (group.start + group.count) * this.object3d.geometry.attributes.position.itemSize;
+      for (let index = positionIndexStart; index < positionIndexCount; index++) {
+        const x = this.object3d.geometry.attributes.position.getX(index);
+        const y = this.object3d.geometry.attributes.position.getY(index);
+        const z = this.object3d.geometry.attributes.position.getZ(index);
         target.max.x = Math.max(x, target.max.x);
         target.max.y = Math.max(y, target.max.y);
         target.max.z = Math.max(z, target.max.z);
@@ -103,7 +103,6 @@ class C3DTFeature {
       console.warn(`[C3DTFeature]: No batch table found for tile ${this.tileId}.`);
       return null; // or return undefined;
     }
-
     this.#info = batchTable.getInfoById(this.batchId);
     return this.#info;
   }

package/lib/Core/Feature.js

@@ -338,10 +338,9 @@ export class FeatureCollection extends THREE.Object3D {
    * @param      {FeatureBuildingOptions|Layer}  options  The building options .
    */
   constructor(options) {
-    var _options$source;
     super();
     this.isFeatureCollection = true;
-    this.crs = CRS.formatToEPSG(options.accurate || !((_options$source = options.source) !== null && _options$source !== void 0 && _options$source.crs) ? options.crs : options.source.crs);
+    this.crs = CRS.formatToEPSG(options.accurate || !options.source?.crs ? options.crs : options.source.crs);
     this.features = [];
     this.mergeFeatures = options.mergeFeatures === undefined ? true : options.mergeFeatures;
     this.size = options.structure == '3d' ? 3 : 2;

package/lib/Core/Geographic/CoordStars.js

@@ -68,7 +68,6 @@ const CoordStars = {
       };
     };
   },
-
   // Return scene coordinate ({x,y,z}) of sun
   getSunPositionInScene(date, lat, lon) {
     const sun = CoordStars.getSunPosition()(date, lat, lon);

package/lib/Core/Label.js

@@ -71,7 +71,6 @@ class Label extends THREE.Object3D {
           // TODO: add smooth transition for fade in/out
         }
       },
-
       get() {
         return _visible;
       }

package/lib/Core/MainLoop.js

@@ -88,7 +88,6 @@ class MainLoop extends EventDispatcher {
     this.scheduler = scheduler;
     this.gfxEngine = engine; // TODO: remove me
   }
-
   scheduleViewUpdate(view, forceRedraw) {
     this.#needsRedraw |= forceRedraw;
     if (this.renderingState !== RENDERING_SCHEDULED) {