@tissuumaps/render 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/index.js

@@ -662,8 +662,10 @@ var OpenSeadragonContext = class OpenSeadragonContext {
 		OpenSeadragonUtils.fixTileCacheCounter();
 		this.viewer = new OpenSeadragon.Viewer({
 			...viewerOptions,
+			showNavigator: true,
 			element: viewerElement
 		});
+		this.viewer.navigator.setVisible(viewerOptions?.showNavigator !== false);
 		this._backgroundPixelUrl = OpenSeadragonUtils.createPixelUrl(backgroundColor.r, backgroundColor.g, backgroundColor.b, 1);
 		this.viewer.addHandler("canvas-key", (event) => {
 			if ([
@@ -787,11 +789,13 @@ var OpenSeadragonContext = class OpenSeadragonContext {
 	* Applies viewer options to the OpenSeadragon viewer and all existing tiled images
 	*
 	* For each option key, performs a shallow merge (one level deep) of nested objects
-	* on both the viewer instance and every tiled image in the world.
+	* on both the viewer instance and every tiled image in the world. `showNavigator`
+	* shows or hides the navigator, as OpenSeadragon reads it only on construction.
 	*
 	* @param viewerOptions - Options to apply
 	*/
 	setViewerOptions(viewerOptions) {
+		if (viewerOptions.showNavigator !== void 0) this.viewer.navigator.setVisible(viewerOptions.showNavigator);
 		for (const [key, value] of Object.entries(viewerOptions)) {
 			if (key in this.viewer && this.viewer[key] !== value) {
 				if (typeof value === "object" && value !== null) this.viewer[key] = {
@@ -1011,8 +1015,12 @@ var OpenSeadragonContext = class OpenSeadragonContext {
 	*/
 	async _openTileSource(tiledImageOptions, options) {
 		const { signal } = options ?? {};
-		const tileSource = await Promise.resolve(tiledImageOptions.tileSource);
+		let tileSource = await Promise.resolve(tiledImageOptions.tileSource);
 		signal?.throwIfAborted();
+		if (typeof tileSource === "object" && tileSource !== null) {
+			const prototype = Object.getPrototypeOf(tileSource);
+			if (prototype === Object.prototype || prototype === null) tileSource = { ...tileSource };
+		}
 		try {
 			const { source: openedTileSource } = await this.viewer.instantiateTileSourceClass({
 				...tiledImageOptions,
@@ -1381,18 +1389,20 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 	/**
 	* Synchronizes the viewer's tiled images with the current model
 	*
-	* Loads all objects assigned to the layers of the model set by
-	* {@link setModel}, removes the tiled images that are no longer needed, and
-	* creates or updates the remaining ones. Resolves once the tiled images have
-	* actually been added to the world, i.e. once the viewer reflects the model
-	* state that was read. The model may be set again while the synchronization
-	* runs; it reads the model once, so it sees one consistent state, while the
-	* properties it applies to the tiled images come from the current model (see
+	* Starts loading the objects on the layers of the model (see
+	* {@link setModel}), and right away removes the tiled images that are no
+	* longer needed (see {@link _cleanRenderedObjects}). Each object is then
+	* synchronized as soon as it has loaded, without waiting for the others: its
+	* tiled images are updated, or created at its position in the world (see
+	* {@link _synchronizeRenderedObject}).
+	*
+	* Resolves once the tiled images of all objects are in the world. The model
+	* is read once, so the synchronization sees one consistent state, but the
+	* properties applied to the tiled images come from the current model (see
 	* {@link _updateRenderedObject}).
 	*
-	* Objects whose tiled images cannot be created, e.g. because their data
-	* provides no tile sources, are logged and skipped, just like objects whose
-	* data failed to load (see {@link _loadObjects}). A synchronization that
+	* Objects whose data fails to load, or whose tiled images cannot be created
+	* (e.g. without tile sources), are logged and dropped. A synchronization that
 	* fails or is aborted leaves the model unsynchronized (see
 	* {@link needsSynchronization}).
 	*
@@ -1409,27 +1419,16 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 		const syncState = this.getSyncState();
 		this._lastSyncState = syncState;
 		try {
-			const newRefs = await this._loadObjects(context, { signal });
-			const renderedObjectsByNewRef = await this._cleanRenderedObjects(newRefs, { signal });
-			this.retainObjects(newRefs.map((newRef) => newRef.object));
-			let offset = 0;
-			const newRenderedObjects = [];
-			for (const newRef of newRefs) {
-				let renderedObject = renderedObjectsByNewRef.get(newRef);
-				if (renderedObject === void 0) try {
-					renderedObject = this._createRenderedObject(offset, newRef, { signal });
-				} catch (error) {
-					console.error(`Failed to create tiled images for object with ID '${newRef.object.id}'`, error);
-					continue;
-				}
-				else this._updateRenderedObject(renderedObject, newRef);
-				newRenderedObjects.push(renderedObject);
-				offset += (renderedObject.usesBackdrop ? 1 : 0) + renderedObject.tileSourceCount;
-			}
-			this._renderedObjects = newRenderedObjects;
-			await Promise.allSettled(newRenderedObjects.map((renderedObject) => renderedObject.tiledImagesPromise));
+			const loadings = this._loadObjects(context, { signal });
+			const renderedObjectsByLoading = await this._cleanRenderedObjects(loadings, { signal });
+			this.retainObjects(loadings.map((loading) => loading.object));
+			const syncResults = await Promise.allSettled(loadings.map((loading, index) => this._synchronizeRenderedObject(loadings.slice(0, index), loading.newRefPromise, renderedObjectsByLoading.get(loading), { signal })));
+			signal?.throwIfAborted();
+			const firstSyncFailure = syncResults.find((result) => result.status === "rejected");
+			if (firstSyncFailure !== void 0) throw firstSyncFailure.reason;
+			await Promise.allSettled(this._renderedObjects.map((renderedObject) => renderedObject.tiledImagesPromise));
 			signal?.throwIfAborted();
-			await this._updateBoundsAndReveal(newRenderedObjects, { signal });
+			await this._updateBoundsAndReveal(this._renderedObjects, { signal });
 		} catch (error) {
 			if (this._lastSyncState === syncState) this._lastSyncState = void 0;
 			throw error;
@@ -1566,13 +1565,12 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 	/**
 	* Retains what was resolved for the given objects, and discards the rest
 	*
-	* Called by {@link synchronize} once all objects have loaded and the rendered
-	* objects of all others have been deleted, with the objects that are about
-	* to be displayed: those assigned to a rendered layer whose data loaded
-	* successfully. Does nothing here; subclasses that keep
-	* state per object (see {@link resolveObject} and
+	* Called by {@link synchronize} with the objects about to be displayed, i.e.
+	* those assigned to a rendered layer, once the rendered objects of all others
+	* have been deleted and before any object has loaded. Does nothing here;
+	* subclasses that keep state per object (see {@link resolveObject} and
 	* {@link resolveTiledImageDataTransfer}) override this to drop the state of
-	* every object that is not among the given ones.
+	* all other objects.
 	*
 	* @param _objects - The objects (images or labels) about to be displayed
 	*/
@@ -1580,15 +1578,15 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 	/**
 	* Resolves what a renderer derives from an object, once its data has loaded
 	*
-	* Called by {@link _loadObjects} for every object on one of the given layers,
-	* concurrently, right after
-	* its data has loaded and before its tiled images are created or updated. An
-	* object that cannot be resolved is logged, but kept: its tiled images are
-	* still created or updated, with whatever the synchronous hooks return for
-	* it. Does nothing here; subclasses override this to resolve, from the
-	* object, its data and the inputs of the synchronization, whatever their
-	* synchronous hooks return later (see {@link resolveTiledImageDataTransfer}),
-	* and to keep it for as long as its outcome would not change.
+	* Called by {@link _loadObjects} for each object, concurrently, once its data
+	* has loaded and before its tiled images are created or updated. An object
+	* that cannot be resolved is logged, but kept: its tiled images are still
+	* created or updated, with whatever the synchronous hooks return for it.
+	*
+	* Does nothing here. Subclasses override this to resolve what their
+	* synchronous hooks return later (see {@link resolveTiledImageDataTransfer})
+	* from the object, its data and the inputs of the synchronization, and to
+	* keep it for as long as its outcome would not change.
 	*
 	* @param _object - The object (image or labels) to resolve
 	* @param _data - The loaded data of the object
@@ -1675,28 +1673,29 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 	*/
 	resolveTiledImageDataTransfer(_ref, _index) {}
 	/**
-	* Concurrently loads and resolves all objects assigned to the layers of the current model
+	* Starts loading and resolving all objects assigned to the layers of the current model
+	*
+	* Loads each object's data with the context's `loadObject`, then resolves the
+	* object (see {@link resolveObject}). Returns right away, with one loading
+	* per object, in world order: by layer, then by object. A loading rejects if
+	* the object's data fails to load, which is logged. An object that cannot be
+	* resolved is logged, but kept.
 	*
-	* Each object's data is loaded with the context's `loadObject`, and the object
-	* is then resolved (see {@link resolveObject}). The returned references are
-	* ordered by layer and then by object, which determines the order of the
-	* corresponding tiled images in the world. Objects whose data failed to load
-	* are logged and skipped; objects that could not be resolved are logged, but
-	* kept. The model is read once, before the first `await`, so one
-	* synchronization sees one consistent model state, however often the model
-	* is set while it runs.
+	* The model is read once, right away, so one synchronization sees one
+	* consistent model state.
 	*
 	* @param context - The inputs of the current synchronization
 	* @param options - Optional abort signal
-	* @returns A promise that resolves to one object reference per successfully loaded object
+	* @returns One loading per object, whose promise resolves to the object's
+	* reference
 	* @throws Error if no model has been set (see {@link setModel})
 	*/
-	async _loadObjects(context, options) {
+	_loadObjects(context, options) {
 		const { signal } = options ?? {};
 		signal?.throwIfAborted();
 		const model = this._model;
 		if (model === void 0) throw new Error("Model not set");
-		const newRefPromises = [];
+		const loadings = [];
 		for (const currentLayer of model.layers) for (const currentObject of model.objects.filter((object) => object.layer === currentLayer.id)) {
 			const newRefPromise = context.loadObject(currentObject, { signal }).then(async (data) => {
 				try {
@@ -1714,57 +1713,62 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 			newRefPromise.catch((error) => {
 				if (!signal?.aborted) console.error(`Failed to load object with ID '${currentObject.id}'`, error);
 			});
-			newRefPromises.push(newRefPromise);
+			loadings.push({
+				layer: currentLayer,
+				object: currentObject,
+				newRefPromise
+			});
 		}
-		const results = await Promise.allSettled(newRefPromises);
-		signal?.throwIfAborted();
-		return results.filter((result) => result.status === "fulfilled").map((result) => result.value);
+		return loadings;
 	}
 	/**
-	* Retains the rendered objects that can be reused for the new object references, and deletes the rest
+	* Keeps the rendered objects that can be reused for a synchronization, and deletes the rest
 	*
 	* A rendered object is matched by the layer and object it references.
-	* Unmatched rendered objects are deleted first, so that removing an object
-	* does not shift the world indices of the objects behind it. A matched
-	* rendered object is reusable if the data source it was loaded for is that of
-	* the reference, and if its backdrop, if any, and all of its tiled images
-	* already sit at the consecutive world indices expected for its position
-	* among the references, counted from the anchor. A partially misplaced object
-	* is not reusable. The other matched rendered objects are deleted as well,
-	* and are expected to be recreated by the caller via
-	* {@link _createRenderedObject}, which is also how the world is reordered.
-	*
-	* The expected indices account for every matched rendered object, reusable or
-	* not, by the world footprint it currently has: a matched object that is
-	* recreated, e.g. because its data source changed, is deleted and inserted at
-	* the same position, with possibly different tiled images, so the objects
-	* behind it keep their indices relative to it and stay reusable. Only the
-	* backdrop and tiled images assigned to it count, i.e. none for an object
-	* whose tiled images could not be added, which is thereby retried without
-	* recreating the objects behind it. The tiled images that an earlier
-	* synchronization is still adding are waited for first, so that each
-	* rendered object is either fully in the world or not at all. This does not
-	* delay the additions of this synchronization, which are queued behind them
-	* anyway (see {@link OpenSeadragonContext.addTiledImage}).
-	*
-	* @param newRefs - The new object references, in the intended world order
+	* Unmatched ones are deleted first, so that their removal does not shift the
+	* world indices of the objects behind them. Only the layers and objects of
+	* the loadings are needed, not their data, so this runs before any of them
+	* has loaded.
+	*
+	* A matched rendered object is reusable if it was loaded for its object's
+	* data source, and if its backdrop, if any, and all of its tiled images sit
+	* at the consecutive world indices expected for its position among the
+	* loadings, counted from the anchor. All other matched rendered objects are
+	* deleted as well, for the caller to recreate them (see
+	* {@link _createRenderedObject}), which is also how the world is reordered.
+	*
+	* The expected indices count every matched rendered object, reusable or not,
+	* by its current footprint. A matched object that is recreated, e.g. because
+	* its data source changed, is reinserted at the same position, so the objects
+	* behind it stay reusable. An object whose tiled images could not be added
+	* has been forgotten (see {@link _createRenderedObject}), so it is created
+	* anew, without recreating the objects behind it.
+	*
+	* The tiled images that an earlier synchronization is still adding are waited
+	* for first, so that each rendered object is either fully in the world or not
+	* at all. This does not delay the additions of this synchronization, which
+	* are queued behind them anyway (see
+	* {@link OpenSeadragonContext.addTiledImage}).
+	*
+	* @param loadings - The loadings of the synchronization (see
+	* {@link _loadObjects}), in world order
 	* @param options - Optional abort signal
-	* @returns A map of new object references to their reusable rendered objects
+	* @returns A map of loadings to their reusable rendered objects
 	* @throws Error if the renderer has no anchor, i.e. it is not initialized or
 	* already destroyed
 	*/
-	async _cleanRenderedObjects(newRefs, options) {
+	async _cleanRenderedObjects(loadings, options) {
 		const { signal } = options ?? {};
 		signal?.throwIfAborted();
 		await Promise.allSettled(this._renderedObjects.map((renderedObject) => renderedObject.tiledImagesPromise));
 		signal?.throwIfAborted();
 		const matchedRenderedObjects = /* @__PURE__ */ new Set();
-		const matchedRenderedObjectsByNewRef = /* @__PURE__ */ new Map();
-		for (const newRef of newRefs) {
-			const renderedObject = this._renderedObjects.find((renderedObject) => renderedObject.ref.layer.id === newRef.layer.id && renderedObject.ref.object.id === newRef.object.id);
+		const matchedRenderedObjectsByLoading = /* @__PURE__ */ new Map();
+		for (const loading of loadings) {
+			const renderedObject = this._renderedObjects.find((renderedObject) => renderedObject.ref.layer.id === loading.layer.id && renderedObject.ref.object.id === loading.object.id);
 			if (renderedObject !== void 0) {
 				matchedRenderedObjects.add(renderedObject);
-				matchedRenderedObjectsByNewRef.set(newRef, renderedObject);
+				matchedRenderedObjectsByLoading.set(loading, renderedObject);
 			}
 		}
 		const unmatchedDeletions = this._renderedObjects.filter((renderedObject) => !matchedRenderedObjects.has(renderedObject)).map((renderedObject) => this._deleteRenderedObject(renderedObject));
@@ -1774,14 +1778,14 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 		if (this._anchor === void 0) throw new Error("Anchor not initialized");
 		const anchorIndex = this.context.getTiledImageIndex(this._anchor);
 		if (anchorIndex === -1) throw new Error("Anchor not found");
-		const renderedObjectsByNewRef = /* @__PURE__ */ new Map();
+		const renderedObjectsByLoading = /* @__PURE__ */ new Map();
 		const survivors = /* @__PURE__ */ new Set();
 		let offset = 1;
-		for (const newRef of newRefs) {
-			const renderedObject = matchedRenderedObjectsByNewRef.get(newRef);
+		for (const loading of loadings) {
+			const renderedObject = matchedRenderedObjectsByLoading.get(loading);
 			if (renderedObject !== void 0) {
-				if (deepEqual(renderedObject.ref.object.dataSource, newRef.object.dataSource) && renderedObject.tiledImages !== void 0 && (renderedObject.backdrop === void 0 || this.context.getTiledImageIndex(renderedObject.backdrop) === anchorIndex + offset) && renderedObject.tiledImages.every((tiledImage, c) => this.context.getTiledImageIndex(tiledImage) === anchorIndex + offset + (renderedObject.backdrop !== void 0 ? 1 : 0) + c)) {
-					renderedObjectsByNewRef.set(newRef, renderedObject);
+				if (deepEqual(renderedObject.ref.object.dataSource, loading.object.dataSource) && renderedObject.tiledImages !== void 0 && (renderedObject.backdrop === void 0 || this.context.getTiledImageIndex(renderedObject.backdrop) === anchorIndex + offset) && renderedObject.tiledImages.every((tiledImage, c) => this.context.getTiledImageIndex(tiledImage) === anchorIndex + offset + (renderedObject.backdrop !== void 0 ? 1 : 0) + c)) {
+					renderedObjectsByLoading.set(loading, renderedObject);
 					survivors.add(renderedObject);
 				}
 				offset += (renderedObject.backdrop !== void 0 ? 1 : 0) + (renderedObject.tiledImages?.length ?? 0);
@@ -1791,39 +1795,94 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 		this._renderedObjects = [...survivors];
 		await Promise.all(unreusableDeletions);
 		signal?.throwIfAborted();
-		return renderedObjectsByNewRef;
+		return renderedObjectsByLoading;
+	}
+	/**
+	* Synchronizes the rendered object of one object, once it has loaded
+	*
+	* A reusable rendered object (see {@link _cleanRenderedObjects}) is updated
+	* with the new reference, or deleted if the object failed to load. Otherwise,
+	* a rendered object is created behind those of the preceding loadings,
+	* whether these are in the world already or still being added. Preceding
+	* objects that arrive later are inserted in front of it, as world mutations
+	* run in request order (see {@link OpenSeadragonContext.addTiledImage}).
+	*
+	* @param precedingLoadings - The loadings that precede the object's in world
+	* order (see {@link _loadObjects})
+	* @param newRefPromise - The promise of the object's reference, from its
+	* loading
+	* @param renderedObject - The object's reusable rendered object, if any
+	* @param options - Optional abort signal
+	* @returns A promise that resolves once the object's tiled images have been
+	* updated, or their creation has been requested
+	*/
+	async _synchronizeRenderedObject(precedingLoadings, newRefPromise, renderedObject, options) {
+		const { signal } = options ?? {};
+		signal?.throwIfAborted();
+		let newRef;
+		try {
+			newRef = await newRefPromise;
+			signal?.throwIfAborted();
+		} catch {
+			signal?.throwIfAborted();
+			if (renderedObject !== void 0) {
+				this._renderedObjects = this._renderedObjects.filter((otherRenderedObject) => otherRenderedObject !== renderedObject);
+				await this._deleteRenderedObject(renderedObject);
+			}
+			return;
+		}
+		if (renderedObject !== void 0) {
+			this._updateRenderedObject(renderedObject, newRef);
+			return;
+		}
+		const precedingRenderedObjects = this._renderedObjects.filter((otherRenderedObject) => precedingLoadings.some((precedingLoading) => precedingLoading.layer.id === otherRenderedObject.ref.layer.id && precedingLoading.object.id === otherRenderedObject.ref.object.id));
+		let offset = 0;
+		for (const otherRenderedObject of precedingRenderedObjects) offset += (otherRenderedObject.usesBackdrop ? 1 : 0) + otherRenderedObject.tileSourceCount;
+		let newRenderedObject;
+		try {
+			newRenderedObject = this._createRenderedObject(offset, newRef, { signal });
+		} catch (error) {
+			console.error(`Failed to create tiled images for object with ID '${newRef.object.id}'`, error);
+			return;
+		}
+		this._renderedObjects = [
+			...precedingRenderedObjects,
+			newRenderedObject,
+			...this._renderedObjects.slice(precedingRenderedObjects.length)
+		];
 	}
 	/**
 	* Creates a new rendered object for the given object reference and adds one TiledImage per channel, preceded by a backdrop where required, to the world
 	*
-	* The TiledImages are inserted at consecutive indices, starting `offset` places
-	* after the anchor, which establishes the world layout that
-	* {@link _cleanRenderedObjects} expects. `offset` therefore counts TiledImages,
-	* not objects, and callers have to advance it by
-	* {@link RenderedObject.tileSourceCount} plus the object's backdrop, if it has
-	* one. The indices are resolved once each addition is executed, as the anchor
-	* may have been replaced, and world indices may have shifted, while it was
-	* enqueued.
-	*
-	* The tile sources are opened here, rather than by the additions themselves,
-	* so that the backdrop can be sized like the object's content, which is only
-	* known once one of them has been opened. The additions are all requested
-	* before this function returns, and in world order, so that the TiledImages of
-	* the object that the caller creates next end up behind them.
-	*
-	* Returns before the TiledImages exist: they are added asynchronously and only
-	* then assigned to the rendered object, transformed, and included in the anchor
-	* bounds, which is when {@link RenderedObject.tiledImagesPromise} resolves. The
-	* backdrop and TiledImages are removed again immediately after they were added
-	* if the rendered object is deleted or the operation is aborted in the
-	* meantime, or if any of them could not be added at all - a partially added
-	* object would shift the world indices of every object after it. For the same
-	* reason, a tile source that fails to open is replaced by a transparent
-	* placeholder rather than skipped: the indices of the objects created after
-	* this one are resolved against the full footprint of this one, so it has to
-	* take up all of its indices until it is removed again. If the context
-	* is destroyed, nothing is done at all, as the viewer tears down its world
-	* itself.
+	* The TiledImages are inserted at consecutive indices, starting `offset`
+	* places after the anchor, which is the world layout that
+	* {@link _cleanRenderedObjects} expects. `offset` thus counts TiledImages,
+	* not objects: the backdrops and TiledImages of the preceding rendered
+	* objects, including those still being added. The indices are resolved when
+	* each addition is executed, as the anchor may have been replaced, and world
+	* indices may have shifted, in the meantime.
+	*
+	* The tile sources are opened here, rather than by the additions, so that the
+	* backdrop can be sized like the object's content, which is only known once
+	* one of them has opened. All additions are requested before this function
+	* returns, in world order, so that the TiledImages of the object created next
+	* end up behind them.
+	*
+	* Returns before the TiledImages exist: they are added asynchronously, and
+	* only then assigned to the rendered object, transformed and included in the
+	* anchor bounds, which is when {@link RenderedObject.tiledImagesPromise}
+	* resolves.
+	*
+	* If the rendered object is deleted or the operation is aborted in the
+	* meantime, or if any TiledImage could not be added, the added backdrop and
+	* TiledImages are removed again right away: a partially added object would
+	* shift the world indices of every object behind it. For the same reason, a
+	* tile source that fails to open is replaced by a transparent placeholder
+	* rather than skipped, as the objects created after this one are placed
+	* against its full footprint. The rendered object is dropped from
+	* {@link _renderedObjects} as its removals are queued, so that objects
+	* created from then on are placed without it. If the context is destroyed,
+	* nothing is done at all, as the viewer tears down its world itself.
 	*
 	* @param offset - The number of TiledImages between the anchor and the object's first new TiledImage
 	* @param newRef - The object reference for which to create a rendered object
@@ -1896,8 +1955,9 @@ var OpenSeadragonRendererBase = class OpenSeadragonRendererBase {
 			if (this.context.isDestroyed()) return tiledImages;
 			const failure = [...tileSourceResults, ...results].find((result) => result.status === "rejected");
 			if (signal?.aborted || failure !== void 0 || newRenderedObject.pendingDelete || this._destroyed) {
-				if (backdrop !== void 0) await this.context.removeTiledImage(backdrop);
-				for (const tiledImage of tiledImages) await this.context.removeTiledImage(tiledImage);
+				this._renderedObjects = this._renderedObjects.filter((renderedObject) => renderedObject !== newRenderedObject);
+				const addedTiledImages = backdrop !== void 0 ? [backdrop, ...tiledImages] : tiledImages;
+				await Promise.all(addedTiledImages.map((tiledImage) => this.context.removeTiledImage(tiledImage)));
 				signal?.throwIfAborted();
 				if (failure !== void 0) {
 					console.error(`Failed to add tiled images for object with ID '${newRef.object.id}'`, failure.reason);
@@ -3983,7 +4043,6 @@ var WebGLRendererBase = class {
 	};
 	_model;
 	_lastSyncState;
-	_hasUnreportedChanges = false;
 	_renderedObjects = /* @__PURE__ */ new Map();
 	_layerItemsInfosCache = /* @__PURE__ */ new WeakMap();
 	/**
@@ -4065,59 +4124,52 @@ var WebGLRendererBase = class {
 	/**
 	* Synchronizes the rendered objects with the current model and render options
 	*
-	* Loads the objects of the model (see {@link loadObjects}), drops the
-	* rendered objects that no longer match one (see
-	* {@link matchOrDestroyRenderedObjects}), and then creates or updates the
-	* rest in two passes. The first prepares every object (see
-	* {@link prepareRenderedObject}), issuing all requests before the first
-	* `await`: requests are shared with, and cancelled once abandoned by, a
-	* superseded synchronization, unless they are reclaimed within the same
-	* task. The second awaits the preparations in order and uploads each of them
-	* in one synchronous block (see {@link createRenderedObject} and
-	* {@link updateRenderedObject}), so a draw never sees a half-updated object.
-	*
-	* An object whose preparation fails, or finds nothing to render, is logged
-	* and dropped. A synchronization that fails or is aborted leaves the model
-	* unsynchronized (see {@link _discardSyncState}), and the changes it made
-	* before it stopped are reported by the next one that completes.
+	* Starts loading the objects of the model (see {@link loadObjects}), and
+	* right away drops the rendered objects that none of them addresses. Each
+	* object is then synchronized on its own, as soon as its data has loaded: the
+	* object is prepared (see {@link prepareRenderedObject}), and the preparation
+	* is uploaded in one synchronous block, either into the reused rendered
+	* object or into one that replaces it (see {@link createRenderedObject} and
+	* {@link updateRenderedObject}). A draw thus never sees a half-updated
+	* object, and a slow or failing object never holds back the others.
+	*
+	* An object issues its requests right after its data has loaded, without
+	* awaiting in between. Requests are shared with a superseded synchronization,
+	* and cancelled once it abandons them, unless they are reclaimed within the
+	* same task. Data that has already loaded allows that.
+	*
+	* An object whose data or preparation fails, or that has nothing to render,
+	* is logged and dropped. A synchronization that fails or is aborted leaves
+	* the model unsynchronized (see {@link _discardSyncState}).
 	*
 	* @param syncContext - The inputs to synchronize with: the tables and
-	* group-to-value maps that the objects resolve their properties from, and
-	* the loaders for object and table data. It carries inputs only; what an
-	* object was resolved from is captured per object (see {@link ObjectRef})
-	* @param options - Optional abort signal
-	* @returns A promise that resolves to whether any rendered object changed
-	* since the last completed synchronization
+	* group-to-value maps that the objects resolve their properties from, and the
+	* loaders for object and table data. It carries inputs only; what an object
+	* was resolved from is captured per object (see {@link ObjectRef})
+	* @param options - Optional abort signal, and a callback that is called
+	* synchronously whenever a rendered object is added, updated or dropped, so
+	* that the caller can draw each object as soon as it is ready
+	* @returns A promise that resolves once all objects have been synchronized
 	* @throws Error if no model has been set (see {@link setModel})
 	*/
 	async synchronize(syncContext, options) {
-		const { signal } = options ?? {};
+		const { signal, onChange } = options ?? {};
 		signal?.throwIfAborted();
 		const syncState = this._recordSyncState();
 		try {
-			const newRefs = await this.loadObjects(syncContext, { signal });
-			const preparations = this.matchOrDestroyRenderedObjects(newRefs).map(({ newRef, renderedObject }) => {
-				const preparedPromise = this.prepareRenderedObject(newRef, renderedObject, syncContext, { signal });
-				preparedPromise.catch(() => {});
-				return {
-					newRef,
-					renderedObject,
-					preparedPromise
-				};
-			});
-			for (const { newRef, renderedObject, preparedPromise } of preparations) {
-				const prepared = await this._settleRenderedObjectPreparation(newRef, renderedObject, preparedPromise, { signal });
-				if (prepared === void 0) continue;
-				if (renderedObject === void 0) this.addRenderedObject(this.createRenderedObject(newRef, prepared));
-				else if (this.updateRenderedObject(renderedObject, prepared)) this._hasUnreportedChanges = true;
-			}
+			const loadings = this.loadObjects(syncContext, { signal });
+			if (this._cleanRenderedObjects(loadings)) onChange?.();
+			const syncResults = await Promise.allSettled(loadings.map(({ layerId, object, newRefPromise }) => this._synchronizeRenderedObject(layerId, object.id, newRefPromise, syncContext, {
+				signal,
+				onChange
+			})));
+			signal?.throwIfAborted();
+			const firstSyncFailure = syncResults.find((result) => result.status === "rejected");
+			if (firstSyncFailure !== void 0) throw firstSyncFailure.reason;
 		} catch (error) {
 			this._discardSyncState(syncState);
 			throw error;
 		}
-		const hasUnreportedChanges = this._hasUnreportedChanges;
-		this._hasUnreportedChanges = false;
-		return hasUnreportedChanges;
 	}
 	/**
 	* Returns the state of the current model and render options that a
@@ -4197,29 +4249,31 @@ var WebGLRendererBase = class {
 	*/
 	getRenderOptionsSyncState() {}
 	/**
-	* Concurrently loads the data of all objects to be rendered on the layers of the current model
+	* Starts loading the data of all objects to be rendered on the layers of the current model
 	*
-	* An object assigned to a layer by layer ID is loaded for that layer only, an
+	* An object assigned to a layer by layer ID is loaded for that layer only. An
 	* object assigned per item by a table column is loaded for every layer, with
 	* the items on each layer resolved from the table (see
 	* {@link _getLayerItemsInfos}). The data of an object, and of a table, is
-	* loaded once, no matter how many references it is shared by.
+	* loaded once, however many references share it.
 	*
-	* The returned references are ordered by layer and then by object. Objects
-	* whose data or table failed to load are logged and skipped, and so are
-	* objects whose items are assigned per item without a table to resolve the
-	* assignment from. Objects without items on a layer are skipped silently,
-	* which also covers empty objects and objects whose table is empty - those
-	* are legitimate states, not failures.
+	* Returns right away, with one loading per object and layer, ordered by layer
+	* and then by object. Each loading settles on its own. It rejects if the
+	* object's data or table fails to load, which is logged. It resolves to
+	* `null` if the object has no items on the layer, which is not logged: empty
+	* objects and empty tables are legitimate states, not failures. An object
+	* whose items are assigned per item, but that has no table to resolve the
+	* assignment from, is logged and gets no loading.
 	*
 	* @param syncContext - The inputs of the current synchronization: the tables
-	* that the objects resolve their item layers from, and the loaders for
-	* object and table data
+	* that the objects resolve their item layers from, and the loaders for object
+	* and table data
 	* @param options - Optional abort signal
-	* @returns A promise that resolves to one reference per loaded object and layer
+	* @returns One loading per object and layer, whose promise resolves to the
+	* object's reference, or to `null` if the object has no items on the layer
 	* @throws Error if no model has been set (see {@link setModel})
 	*/
-	async loadObjects(syncContext, options) {
+	loadObjects(syncContext, options) {
 		const { signal } = options ?? {};
 		signal?.throwIfAborted();
 		const model = this._model;
@@ -4228,7 +4282,7 @@ var WebGLRendererBase = class {
 		const tableDataPromises = /* @__PURE__ */ new Map();
 		const tableLayersPromises = /* @__PURE__ */ new Map();
 		const layerItemsInfosPromises = /* @__PURE__ */ new Map();
-		const newRefPromises = [];
+		const loadings = [];
 		const objectIdsWithoutTable = /* @__PURE__ */ new Set();
 		for (const currentLayer of model.layers) for (const currentObject of model.objects) {
 			if (typeof currentObject.layer === "string" && currentObject.layer !== currentLayer.id) continue;
@@ -4292,67 +4346,33 @@ var WebGLRendererBase = class {
 			}
 			const newRefPromise = Promise.all([dataPromise, layerItemsInfosPromise]).then(([data, layerItemsInfos]) => {
 				signal?.throwIfAborted();
+				let newRef;
 				if (layerItemsInfos !== void 0) {
 					const itemsInfo = layerItemsInfos.get(currentLayer.id);
-					return {
+					newRef = {
 						layerId: currentLayer.id,
 						object: currentObject,
 						itemIds: itemsInfo?.itemIds ?? [],
 						itemsMask: itemsInfo?.itemsMask,
 						data
 					};
-				}
-				return {
+				} else newRef = {
 					layerId: currentLayer.id,
 					object: currentObject,
 					itemIds: data.getIds(),
 					itemsMask: void 0,
 					data
 				};
+				return newRef.itemIds.length > 0 ? newRef : null;
+			});
+			newRefPromise.catch(() => {});
+			loadings.push({
+				layerId: currentLayer.id,
+				object: currentObject,
+				newRefPromise
 			});
-			newRefPromises.push(newRefPromise);
-		}
-		const results = await Promise.allSettled(newRefPromises);
-		signal?.throwIfAborted();
-		return results.filter((result) => result.status === "fulfilled").filter((result) => result.value.itemIds.length > 0).map((result) => result.value);
-	}
-	/**
-	* Matches the rendered objects to a new set of references, and destroys the
-	* ones left over
-	*
-	* A rendered object is matched by the layer and object it is kept under, and
-	* kept if its contributed items and data source are those of the reference,
-	* which it then adopts and is returned for reuse with. Every other rendered
-	* object - one that no reference addresses, or one whose items or data source
-	* changed - is destroyed and dropped.
-	*
-	* @param newRefs - The object references to match against
-	* @returns One match per reference, in the order of the references, each with
-	* the rendered object to reuse for it, or `undefined` if it has none yet
-	*/
-	matchOrDestroyRenderedObjects(newRefs) {
-		const matchedRenderedObjects = /* @__PURE__ */ new Set();
-		const matches = newRefs.map((newRef) => {
-			const renderedObject = this._renderedObjects.get(newRef.layerId)?.get(newRef.object.id);
-			if (renderedObject !== void 0 && renderedObject.ref.itemIds === newRef.itemIds && renderedObject.ref.itemsMask === newRef.itemsMask && deepEqual(renderedObject.ref.object.dataSource, newRef.object.dataSource)) {
-				renderedObject.ref = newRef;
-				matchedRenderedObjects.add(renderedObject);
-				return {
-					newRef,
-					renderedObject
-				};
-			}
-			return {
-				newRef,
-				renderedObject: void 0
-			};
-		});
-		for (const renderedObjects of this._renderedObjects.values()) for (const [objectId, renderedObject] of renderedObjects) if (!matchedRenderedObjects.has(renderedObject)) {
-			renderedObjects.delete(objectId);
-			this.destroyRenderedObject(renderedObject);
-			this._hasUnreportedChanges = true;
 		}
-		return matches;
+		return loadings;
 	}
 	/**
 	* Adds a newly created rendered object under its layer and object
@@ -4367,7 +4387,6 @@ var WebGLRendererBase = class {
 			this._renderedObjects.set(layerId, renderedObjects);
 		}
 		renderedObjects.set(object.id, renderedObject);
-		this._hasUnreportedChanges = true;
 	}
 	/**
 	* Drops a rendered object and releases its GPU resources
@@ -4377,7 +4396,6 @@ var WebGLRendererBase = class {
 	removeRenderedObject(renderedObject) {
 		this._renderedObjects.get(renderedObject.ref.layerId)?.delete(renderedObject.ref.object.id);
 		this.destroyRenderedObject(renderedObject);
-		this._hasUnreportedChanges = true;
 	}
 	/**
 	* Drops all rendered objects and releases their GPU resources
@@ -4385,7 +4403,6 @@ var WebGLRendererBase = class {
 	clearRenderedObjects() {
 		for (const renderedObjects of this._renderedObjects.values()) for (const renderedObject of renderedObjects.values()) this.destroyRenderedObject(renderedObject);
 		this._renderedObjects.clear();
-		this._hasUnreportedChanges = true;
 	}
 	/**
 	* Returns one render pass per rendered object to draw, in draw order
@@ -4531,35 +4548,90 @@ var WebGLRendererBase = class {
 		return layerItemsInfos;
 	}
 	/**
-	* Awaits the preparation of an object, dropping the object if it fails or
-	* finds nothing to render
+	* Drops the rendered objects that none of the given loadings addresses
 	*
-	* @param newRef - The prepared object
-	* @param renderedObject - The object's current rendered state, if any, which
-	* is removed if the object is dropped
-	* @param preparedPromise - The preparation, see {@link prepareRenderedObject}
-	* @param options - Optional abort signal
-	* @returns The preparation, or `undefined` if the object was dropped (which
-	* is logged)
+	* Their layer or object has left the model, or the object has moved to
+	* another layer, so they are no longer drawn (see {@link getRenderPasses}).
+	* They are dropped right away, rather than once the remaining objects have
+	* loaded. Whether the others can be reused is decided per object, once its
+	* data has loaded (see {@link _synchronizeRenderedObject}).
+	*
+	* @param loadings - The loadings of the current synchronization (see
+	* {@link loadObjects})
+	* @returns Whether any rendered object was dropped
 	*/
-	async _settleRenderedObjectPreparation(newRef, renderedObject, preparedPromise, options) {
-		const { signal } = options ?? {};
+	_cleanRenderedObjects(loadings) {
+		let removed = false;
+		for (const [layerId, renderedObjects] of this._renderedObjects) for (const [objectId, renderedObject] of renderedObjects) if (!loadings.some((loading) => loading.layerId === layerId && loading.object.id === objectId)) {
+			this.removeRenderedObject(renderedObject);
+			removed = true;
+		}
+		return removed;
+	}
+	/**
+	* Synchronizes the rendered object of one object and layer, once its data has loaded
+	*
+	* The rendered object kept under the layer and object is reused if its items
+	* and data source match the new reference, which it then adopts. The object
+	* is then prepared and uploaded (see {@link synchronize}). A rendered object
+	* that is not reused stays drawn until its replacement is uploaded, and is
+	* then dropped in the same synchronous block. If the object's data failed to
+	* load, or it has no items on the layer, it is only dropped. So is it if its
+	* preparation fails or finds nothing to render, which is logged.
+	*
+	* @param layerId - The ID of the layer
+	* @param objectId - The ID of the object
+	* @param newRefPromise - The object's loading (see {@link loadObjects})
+	* @param syncContext - The inputs of the current synchronization
+	* @param options - Optional abort signal, and the callback to call whenever
+	* the rendered object is added, updated or dropped
+	* @returns A promise that resolves once the object has been synchronized
+	*/
+	async _synchronizeRenderedObject(layerId, objectId, newRefPromise, syncContext, options) {
+		const { signal, onChange } = options ?? {};
+		signal?.throwIfAborted();
+		let newRef;
+		try {
+			newRef = await newRefPromise;
+			signal?.throwIfAborted();
+		} catch {
+			signal?.throwIfAborted();
+			newRef = null;
+		}
+		let renderedObject;
+		const oldRenderedObject = this._renderedObjects.get(layerId)?.get(objectId);
+		if (oldRenderedObject !== void 0 && newRef !== null && oldRenderedObject.ref.itemIds === newRef.itemIds && oldRenderedObject.ref.itemsMask === newRef.itemsMask && deepEqual(oldRenderedObject.ref.object.dataSource, newRef.object.dataSource)) {
+			oldRenderedObject.ref = newRef;
+			renderedObject = oldRenderedObject;
+		}
+		if (newRef === null) {
+			if (oldRenderedObject !== void 0) {
+				this.removeRenderedObject(oldRenderedObject);
+				onChange?.();
+			}
+			return;
+		}
 		let prepared;
 		try {
-			prepared = await preparedPromise;
+			prepared = await this.prepareRenderedObject(newRef, renderedObject, syncContext, { signal });
+			signal?.throwIfAborted();
 		} catch (error) {
 			signal?.throwIfAborted();
 			console.error(`Failed to prepare object with ID '${newRef.object.id}'`, error);
-			if (renderedObject !== void 0) this.removeRenderedObject(renderedObject);
-			return;
 		}
-		signal?.throwIfAborted();
-		if (prepared === null) {
-			console.warn(`Object with ID '${newRef.object.id}' has nothing to render, skipping`);
-			if (renderedObject !== void 0) this.removeRenderedObject(renderedObject);
+		if (prepared === null) console.warn(`Object with ID '${newRef.object.id}' has nothing to render, skipping`);
+		if (prepared === void 0 || prepared === null) {
+			if (oldRenderedObject !== void 0) {
+				this.removeRenderedObject(oldRenderedObject);
+				onChange?.();
+			}
 			return;
 		}
-		return prepared;
+		if (renderedObject === void 0) {
+			if (oldRenderedObject !== void 0) this.removeRenderedObject(oldRenderedObject);
+			this.addRenderedObject(this.createRenderedObject(newRef, prepared));
+			onChange?.();
+		} else if (this.updateRenderedObject(renderedObject, prepared)) onChange?.();
 	}
 	/**
 	* Creates the loader for the tables that an object resolves its properties