@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/fragment-viewer/runtime.mjs

@@ -0,0 +1,782 @@
+import { Cinematic } from "./cinematic.mjs";
+import * as OBC from "@thatopen/components";
+import * as THREE from "three";
+import * as OBF from "@thatopen/components-front";
+import * as FRAGS from "@thatopen/fragments";
+//#region src/fragment-viewer/runtime.ts
+/** Edge length of a section plane's handle, in metres. The SDK default spans the whole scene. */
+const CLIPPER_PLANE_SIZE_M = 20;
+/** Ghost-mode face tint — a cool grey, so faded geometry reads as glass rather than glare. */
+const GHOST_FACE_COLOR = 10135476;
+/** Ghost-mode line tint, kept fainter than the faces so edges don't dominate. */
+const GHOST_LINE_COLOR = 7042948;
+/** Fade applied to the storeys *other* than the selected one, so the level stands out in context. */
+const STOREY_GHOST_MATERIAL = {
+	color: new THREE.Color(10135476),
+	renderedFaces: 0,
+	opacity: .08,
+	transparent: true
+};
+/** Pointer travel still counted as a click rather than a camera drag. */
+const DRAG_TOLERANCE_PX = 4;
+/**
+* A hard-hat marker geometry — a domed crown with a small brim — sized to fit the same footprint as a
+* sphere of `radius` (so it reads at the same size as the old sphere markers). Built as a single
+* `LatheGeometry` (a revolved profile) so it works as one instanced geometry, no mesh merging needed.
+*/
+function createHelmetGeometry(radius) {
+	const points = [
+		[.02, .9],
+		[.3, .86],
+		[.52, .74],
+		[.68, .55],
+		[.76, .3],
+		[.78, .1],
+		[1, .05]
+	].map(([x, y]) => new THREE.Vector2(x * radius, y * radius));
+	const geometry = new THREE.LatheGeometry(points, 18);
+	geometry.translate(0, -.475 * radius, 0);
+	geometry.computeVertexNormals();
+	return geometry;
+}
+var FragmentViewport = class {
+	components;
+	world;
+	container;
+	options;
+	fragments;
+	highlighter;
+	/** GPU picker used only in floor-only mode (the highlighter is disabled there). */
+	picker = null;
+	clipper;
+	grid;
+	measurements;
+	resizeObserver;
+	originalMaterials = /* @__PURE__ */ new Map();
+	markers = null;
+	markerIds = [];
+	markerCapacity = 0;
+	markerRadius = 0;
+	markerOccluded = false;
+	selection = {};
+	interaction = null;
+	clippingEnabled = true;
+	ghostStyle = null;
+	storeyBands = /* @__PURE__ */ new Map();
+	ghostedStorey = {};
+	/** Cached per-element storey assignment (modelId → localId → storeyId). Avoids re-scanning geometry
+	*  on every floor switch, and lets openStorey apply only the *delta* in ghosting (no full un-ghost
+	*  flash). Invalidated when storeys are recomputed. */
+	elementStoreys = null;
+	/** Last emitted camera yaw (deg); NaN until the first tick so the initial heading always fires. */
+	lastHeadingDeg = NaN;
+	/** Cinematic mode (sun shadows + AO + bloom + beams + tone mapping). Built lazily on first enable. */
+	cinematic = null;
+	disposed = false;
+	constructor(container, options) {
+		this.container = container;
+		this.options = options;
+		this.components = new OBC.Components();
+		this.world = this.components.get(OBC.Worlds).create();
+		this.world.scene = new OBC.SimpleScene(this.components);
+		this.world.scene.setup();
+		if (options.background !== null) this.world.scene.three.background = new THREE.Color(options.background ?? "#e8edf2");
+		this.world.renderer = new OBF.PostproductionRenderer(this.components, container);
+		this.world.renderer.three.localClippingEnabled = true;
+		this.world.camera = new OBC.OrthoPerspectiveCamera(this.components);
+		this.world.camera.controls.setLookAt(18, 14, 18, 0, 2, 0);
+		const canvas = this.world.renderer.three.domElement;
+		canvas.style.position = "absolute";
+		canvas.style.inset = "0";
+		canvas.style.width = "100%";
+		canvas.style.height = "100%";
+		if (options.showLogo === false) this.world.renderer.showLogo = false;
+		this.components.init();
+		this.grid = this.components.get(OBC.Grids).create(this.world);
+		this.fragments = this.components.get(OBC.FragmentsManager);
+		this.fragments.init(options.workerUrl);
+		this.world.camera.controls.addEventListener("update", () => void this.fragments.core.update());
+		if (options.onHeadingChange) {
+			const emitHeading = () => {
+				const deg = THREE.MathUtils.radToDeg(this.world.camera.controls.azimuthAngle);
+				if (Math.abs(deg - this.lastHeadingDeg) < .5) return;
+				this.lastHeadingDeg = deg;
+				options.onHeadingChange?.(deg);
+			};
+			this.world.camera.controls.addEventListener("update", emitHeading);
+			emitHeading();
+		}
+		this.world.onCameraChanged.add((camera) => {
+			for (const [, model] of this.fragments.list) model.useCamera(camera.three);
+			this.fragments.core.update(true);
+		});
+		this.fragments.list.onItemSet.add(({ value: model }) => {
+			model.useCamera(this.world.camera.three);
+			this.world.scene.three.add(model.object);
+			model.getClippingPlanesEvent = () => Array.from(this.world.renderer?.three.clippingPlanes ?? []);
+			this.fragments.core.update(true);
+			options.onModelsChange?.([...this.fragments.list.keys()]);
+		});
+		this.fragments.list.onItemDeleted.add(() => options.onModelsChange?.([...this.fragments.list.keys()]));
+		this.fragments.core.models.materials.list.onItemSet.add(({ value: material }) => {
+			if ("isLodMaterial" in material && material.isLodMaterial) return;
+			material.polygonOffset = true;
+			material.polygonOffsetUnits = 1;
+			material.polygonOffsetFactor = 1;
+		});
+		this.components.get(OBC.Raycasters).get(this.world);
+		this.highlighter = this.components.get(OBF.Highlighter);
+		this.highlighter.setup({
+			world: this.world,
+			selectMaterialDefinition: {
+				color: new THREE.Color(options.selectionColor ?? "#3b82f6"),
+				opacity: 1,
+				transparent: false,
+				renderedFaces: 0
+			}
+		});
+		this.highlighter.multiple = "shiftKey";
+		this.highlighter.events.select.onHighlight.add((map) => void this.publishSelection(map));
+		if (options.selectFloorsOnly) {
+			this.highlighter.enabled = false;
+			this.picker = new OBC.FastModelPicker(this.components, this.world);
+		}
+		this.highlighter.events.select.onClear.add(() => {
+			this.selection = {};
+			options.onSelectionChange?.(null);
+		});
+		this.clipper = this.components.get(OBC.Clipper);
+		this.clipper.enabled = true;
+		const reclip = () => void this.fragments.core.update(true);
+		this.clipper.onAfterCreate.add(reclip);
+		this.clipper.onAfterDelete.add(reclip);
+		this.clipper.onAfterDrag.add(reclip);
+		this.clipper.autoScalePlanes = false;
+		this.clipper.size = CLIPPER_PLANE_SIZE_M;
+		this.clipper.material.opacity = .1;
+		this.clipper.material.transparent = true;
+		this.measurements = {
+			length: this.components.get(OBF.LengthMeasurement),
+			area: this.components.get(OBF.AreaMeasurement),
+			angle: this.components.get(OBF.AngleMeasurement),
+			volume: this.components.get(OBF.VolumeMeasurement)
+		};
+		for (const tool of Object.values(this.measurements)) {
+			tool.world = this.world;
+			tool.enabled = false;
+		}
+		this.measurements.length.snappings = [FRAGS.SnappingClass.POINT, FRAGS.SnappingClass.LINE];
+		container.addEventListener("pointerdown", this.onPointerDown);
+		container.addEventListener("pointerup", this.onPointerUp);
+		container.addEventListener("dblclick", this.onDoubleClick);
+		window.addEventListener("keydown", this.onKeyDown);
+		this.resizeObserver = new ResizeObserver(this.resize);
+		this.resizeObserver.observe(container);
+	}
+	/** Fetch and display a `.frag`, then frame everything loaded. */
+	async load(src, modelId) {
+		this.ensureActive();
+		this.options.onStatusChange?.("loading");
+		try {
+			const response = await fetch(src);
+			if (!response.ok) throw new Error(`${response.status} ${response.statusText} — ${src}`);
+			const buffer = await response.arrayBuffer();
+			if (this.disposed) return;
+			await this.fragments.core.load(buffer, { modelId });
+			if (this.disposed) return;
+			this.groundGrid();
+			await this.fit();
+			this.options.onStatusChange?.("ready");
+		} catch (error) {
+			if (this.disposed) return;
+			this.options.onStatusChange?.("error", error instanceof Error ? error : new Error(String(error)));
+		}
+	}
+	async unload(modelId) {
+		await this.fragments.core.disposeModel(modelId);
+		await this.fragments.core.update(true);
+	}
+	get modelIds() {
+		return [...this.fragments.list.keys()];
+	}
+	/** Frame the loaded models — or, when `fitCategories` is set, only the elements in those categories
+	* (e.g. the building shell), so stray/site geometry doesn't zoom the camera out. */
+	async fit() {
+		if (this.fragments.list.size === 0) return;
+		const box = await this.categoryBox(this.options.fitCategories) ?? this.wholeModelBox();
+		if (box.isEmpty()) return;
+		const sphere = new THREE.Sphere();
+		box.getBoundingSphere(sphere);
+		const factor = this.options.fitFactor ?? 1;
+		if (factor > 0 && factor !== 1) sphere.radius *= factor;
+		await this.world.camera.controls.fitToSphere(sphere, this.options.fitAnimation ?? true);
+		await this.fragments.core.update(true);
+	}
+	/**
+	* Sit the ground grid at the base of the loaded geometry instead of world Y=0.
+	*
+	* The grid is created at Y=0, but nothing guarantees a model's ground floor lives there: this
+	* building is authored with its origin up near the penthouse, so the whole tower hangs *below*
+	* Y=0 and the grid slices through the top floor. Snapping the grid to the model's own min-Y drops
+	* the reference plane back under the ground floor, where "the ground" belongs. Only the grid moves,
+	* so every coordinate the rest of the viewport works in (storeys, markers, sections) is untouched.
+	*/
+	groundGrid() {
+		const box = this.wholeModelBox();
+		if (box.isEmpty()) return;
+		this.grid.three.position.y = box.min.y;
+	}
+	/** Bounding box of all loaded geometry. */
+	wholeModelBox() {
+		const boxer = this.components.get(OBC.BoundingBoxer);
+		boxer.list.clear();
+		boxer.addFromModels();
+		const box = boxer.get();
+		boxer.list.clear();
+		return box;
+	}
+	/** Union of the bounding boxes of the given categories across every model, or null if none matched
+	* (so the caller falls back to the whole model). */
+	async categoryBox(patterns) {
+		if (!patterns || patterns.length === 0) return null;
+		const union = new THREE.Box3();
+		union.makeEmpty();
+		let matched = false;
+		for (const [, model] of this.fragments.list) {
+			const items = await model.getItemsOfCategories(patterns);
+			const ids = Object.values(items).flat();
+			if (ids.length === 0) continue;
+			for (const box of await model.getBoxes(ids)) {
+				union.union(box);
+				matched = true;
+			}
+		}
+		return matched ? union : null;
+	}
+	setNavigation(mode) {
+		this.world.camera.set("Orbit");
+		this.setLeftDrag(mode === "Pan" ? "truck" : "rotate");
+	}
+	/**
+	* Swap what a left-drag does. camera-controls exposes its action enum as a static on the class;
+	* read it off the instance's constructor rather than importing camera-controls directly, which
+	* would add a dependency purely for two constants.
+	*/
+	setLeftDrag(action) {
+		const controls = this.world.camera.controls;
+		const actions = controls.constructor.ACTION;
+		if (!actions) return;
+		const next = action === "truck" ? actions.TRUCK : actions.ROTATE;
+		controls.mouseButtons.left = next;
+	}
+	/**
+	* Toggle cinematic mode (sun cast-shadows + ambient occlusion + bloom + volumetric beams + ACES tone
+	* mapping) and return the state now active.
+	*
+	* Full navigation stays live while on — orbit, pan and zoom — so you can turn the model in the light.
+	* Turning it off restores every renderer/scene mutation and frees all GPU resources, so it costs
+	* nothing (memory or frame time) while off.
+	*/
+	setCinematic(enabled) {
+		if (enabled) {
+			this.cinematic ??= new Cinematic(this.world);
+			const box = this.wholeModelBox();
+			this.cinematic.enable(box.isEmpty() ? null : box, this.grid.three);
+		} else this.cinematic?.disable();
+		return this.cinematic?.active ?? false;
+	}
+	get cinematicActive() {
+		return this.cinematic?.active ?? false;
+	}
+	/** Swap perspective <-> orthographic and return the mode now active. */
+	async toggleProjection() {
+		await this.world.camera.projection.toggle();
+		this.world.renderer?.postproduction.updateCamera();
+		return this.world.camera.projection.current;
+	}
+	get projection() {
+		return this.world.camera.projection.current;
+	}
+	/**
+	* Choose what a double-click does: place a clipping plane, start a measurement, or nothing
+	* (leaving clicks to selection). Only one at a time, mirroring the toolbar's radio behaviour.
+	*/
+	setInteraction(mode) {
+		this.interaction = mode;
+		this.highlighter.enabled = mode === null;
+		for (const [kind, tool] of Object.entries(this.measurements)) tool.enabled = mode !== null && mode !== "section" && kind === mode;
+	}
+	get interactionMode() {
+		return this.interaction;
+	}
+	/** Enable/disable existing planes without deleting them; returns the state now active. */
+	toggleClipping() {
+		this.clippingEnabled = !this.clippingEnabled;
+		for (const [, plane] of this.clipper.list) plane.enabled = this.clippingEnabled;
+		return this.clippingEnabled;
+	}
+	clearSections() {
+		this.clipper.deleteAll();
+	}
+	clearMeasurements() {
+		for (const tool of Object.values(this.measurements)) tool.list.clear();
+	}
+	async hideSelection() {
+		await this.components.get(OBC.Hider).set(false, this.selection);
+		await this.highlighter.clear();
+		await this.fragments.core.update(true);
+	}
+	async isolateSelection() {
+		await this.components.get(OBC.Hider).isolate(this.selection);
+		await this.fragments.core.update(true);
+	}
+	/**
+	* Restore everything: un-hide every element and leave any open storey view.
+	*
+	* Both halves are needed. `Hider.set(true)` alone leaves an open storey still filtering the model,
+	* so the user clicks "Show all" and still sees one floor; closing the view alone leaves anything
+	* hidden or isolated by hand still hidden.
+	*/
+	async showAll() {
+		await this.components.get(OBC.Hider).set(true);
+		await this.fragments.core.update(true);
+	}
+	get ghost() {
+		return this.originalMaterials.size > 0;
+	}
+	/**
+	* Fade the whole model to translucent glass so selections, sections and markers read through it —
+	* "ghost mode" in every BIM viewer. Two parts matter for it to look clean rather than a wall of
+	* white lines:
+	*
+	*  - The postproduction edge pass is turned off. It outlines every element, and over faded
+	*    geometry those crisp edges stack into the bright white grid you would otherwise see.
+	*  - Faces fade to a cool grey, not pure white, and don't write depth — so you see *through* the
+	*    building to a soft translucent shell, the way BIMCamel and the SDK's own ghost look.
+	*/
+	async setGhost(enabled) {
+		if (enabled === this.ghost) return;
+		const post = this.world.renderer?.postproduction;
+		if (enabled) {
+			this.ghostStyle = post?.style ?? null;
+			if (post) post.style = OBF.PostproductionAspect.COLOR;
+			for (const material of this.fragments.core.models.materials.list.values()) {
+				if (material.userData.customId) continue;
+				const isLod = !("color" in material);
+				const color = isLod ? material.lodColor.getHex() : material.color.getHex();
+				this.originalMaterials.set(material, {
+					color,
+					transparent: material.transparent,
+					opacity: material.opacity,
+					depthWrite: material.depthWrite
+				});
+				material.transparent = true;
+				material.opacity = isLod ? .06 : .12;
+				material.depthWrite = false;
+				if (isLod) material.lodColor.setHex(GHOST_LINE_COLOR);
+				else material.color.setHex(GHOST_FACE_COLOR);
+				material.needsUpdate = true;
+			}
+		} else {
+			if (post && this.ghostStyle !== null) post.style = this.ghostStyle;
+			for (const [material, original] of this.originalMaterials) {
+				material.transparent = original.transparent;
+				material.opacity = original.opacity;
+				material.depthWrite = original.depthWrite;
+				if ("color" in material) material.color.setHex(original.color);
+				else material.lodColor.setHex(original.color);
+				material.needsUpdate = true;
+			}
+			this.originalMaterials.clear();
+		}
+		await this.fragments.core.update(true);
+	}
+	setPostproduction(enabled) {
+		if (this.world.renderer) this.world.renderer.postproduction.enabled = enabled;
+	}
+	/**
+	* Draw point markers in the model. One InstancedMesh for the whole set: thousands of separate
+	* meshes would be thousands of draw calls and would stall the frame, while instancing draws them
+	* all in one and scales to tens of thousands.
+	*
+	* Radius defaults to a fraction of the model's diagonal, so markers read at a sensible size
+	* whether the model is a villa or a city block, and regardless of the file's units.
+	*/
+	setMarkers(markers, options = {}) {
+		const radius = options.radius ?? this.defaultMarkerRadius();
+		const occluded = options.occluded === true;
+		if (!(this.markers !== null && markers.length <= this.markerCapacity && radius === this.markerRadius && occluded === this.markerOccluded)) {
+			this.clearMarkers();
+			if (markers.length === 0) return;
+			const geometry = createHelmetGeometry(radius);
+			const material = new THREE.MeshLambertMaterial();
+			material.side = THREE.DoubleSide;
+			material.clippingPlanes = this.world.renderer?.three.clippingPlanes ?? null;
+			if (!occluded) {
+				material.depthTest = false;
+				material.transparent = false;
+			}
+			const capacity = Math.max(1, markers.length);
+			const mesh = new THREE.InstancedMesh(geometry, material, capacity);
+			mesh.renderOrder = occluded ? 0 : 999;
+			mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+			mesh.raycast = () => {};
+			this.world.scene.three.add(mesh);
+			this.markers = mesh;
+			this.markerCapacity = capacity;
+			this.markerRadius = radius;
+			this.markerOccluded = occluded;
+		}
+		const mesh = this.markers;
+		if (!mesh) return;
+		if (markers.length === 0) {
+			mesh.count = 0;
+			mesh.instanceMatrix.needsUpdate = true;
+			this.markerIds = [];
+			return;
+		}
+		const matrix = new THREE.Matrix4();
+		const color = new THREE.Color();
+		const fallback = options.color ?? "#f59e0b";
+		markers.forEach((marker, index) => {
+			matrix.setPosition(marker.position[0], marker.position[1], marker.position[2]);
+			mesh.setMatrixAt(index, matrix);
+			mesh.setColorAt(index, color.set(marker.color ?? fallback));
+		});
+		mesh.count = markers.length;
+		mesh.instanceMatrix.needsUpdate = true;
+		if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;
+		this.markerIds = markers.map((marker) => marker.id);
+	}
+	clearMarkers() {
+		if (!this.markers) return;
+		this.world.scene.three.remove(this.markers);
+		this.markers.geometry.dispose();
+		this.markers.material.dispose();
+		this.markers.dispose();
+		this.markers = null;
+		this.markerCapacity = 0;
+		this.markerRadius = 0;
+		this.markerOccluded = false;
+		this.markerIds = [];
+	}
+	get markerCount() {
+		return this.markerIds.length;
+	}
+	/** ~1/300th of the model diagonal: about 0.5 m on a 150 m building, which reads as a person. */
+	defaultMarkerRadius() {
+		const boxer = this.components.get(OBC.BoundingBoxer);
+		boxer.list.clear();
+		boxer.addFromModels();
+		const box = boxer.get();
+		boxer.list.clear();
+		if (box.isEmpty()) return .5;
+		const size = box.getSize(new THREE.Vector3());
+		return Math.max(.15, size.length() / 300);
+	}
+	/**
+	* Storeys from the IFC spatial structure. We don\'t use the SDK\'s storey plan-views: they cut a thin
+	* horizontal slab that, on a multi-storey tower, lands between floors and shows nothing. Instead a
+	* level is shown by ghosting every element not tagged to that storey (see `ensureElementStoreys`),
+	* which keeps the 3D view. The elevation bands built here are kept only for the known-storey guard in
+	* `openStorey` and the storey elevation metadata returned below.
+	*/
+	async storeys() {
+		this.elementStoreys = null;
+		const views = this.components.get(OBC.Views);
+		views.world = this.world;
+		const created = await views.createFromIfcStoreys();
+		const elevationOf = (view) => {
+			const { normal, constant } = view.plane;
+			return Math.abs(normal.y) > 1e-6 ? -constant / normal.y : 0;
+		};
+		const sorted = created.map((view) => ({
+			id: view.id,
+			elevation: elevationOf(view)
+		})).sort((a, b) => a.elevation - b.elevation);
+		const gaps = sorted.slice(1).map((s, i) => s.elevation - sorted[i].elevation).filter((g) => g > .5);
+		const medianGap = gaps.length ? [...gaps].sort((a, b) => a - b)[gaps.length >> 1] : 4;
+		this.storeyBands = new Map(sorted.map((storey, index) => {
+			const top = index + 1 < sorted.length ? sorted[index + 1].elevation : storey.elevation + medianGap;
+			return [storey.id, {
+				min: storey.elevation - .5,
+				max: top - .1
+			}];
+		}));
+		return sorted.map((storey) => ({
+			id: storey.id,
+			name: storey.id,
+			elevation: storey.elevation
+		}));
+	}
+	/** The whole model's world-space bounding box, as plain arrays (null if nothing is loaded). */
+	bounds() {
+		if (this.fragments.list.size === 0) return null;
+		const boxer = this.components.get(OBC.BoundingBoxer);
+		boxer.list.clear();
+		boxer.addFromModels();
+		const box = boxer.get();
+		boxer.list.clear();
+		if (box.isEmpty()) return null;
+		return {
+			min: [
+				box.min.x,
+				box.min.y,
+				box.min.z
+			],
+			max: [
+				box.max.x,
+				box.max.y,
+				box.max.z
+			]
+		};
+	}
+	/**
+	* Emphasise one storey: keep its elements in their real materials and fade every other storey to
+	* translucent grey, so the level reads in context rather than floating alone. Done with a
+	* per-element highlight on the *other* storeys — a material swap wouldn't work, because Fragments
+	* materials are shared across storeys, so fading one fades all.
+	*/
+	async openStorey(id) {
+		if (!this.storeyBands.has(id)) return;
+		const assign = await this.ensureElementStoreys();
+		const nextGhost = {};
+		const inBand = {};
+		for (const [modelId, perId] of assign) {
+			const g = /* @__PURE__ */ new Set();
+			const within = /* @__PURE__ */ new Set();
+			for (const [localId, sid] of perId) if (sid === id) within.add(localId);
+			else g.add(localId);
+			if (g.size) nextGhost[modelId] = g;
+			if (within.size) inBand[modelId] = within;
+		}
+		const renderer = this.world.renderer;
+		const wasRendering = renderer ? renderer.enabled : true;
+		if (renderer) renderer.enabled = false;
+		try {
+			for (const [modelId, model] of this.fragments.list) {
+				const cur = this.ghostedStorey[modelId] ?? /* @__PURE__ */ new Set();
+				const nxt = nextGhost[modelId] ?? /* @__PURE__ */ new Set();
+				const toAdd = [];
+				for (const localId of nxt) if (!cur.has(localId)) toAdd.push(localId);
+				const toClear = [];
+				for (const localId of cur) if (!nxt.has(localId)) toClear.push(localId);
+				if (toAdd.length) await model.highlight(toAdd, STOREY_GHOST_MATERIAL);
+				if (toClear.length) await model.resetHighlight(toClear);
+			}
+			this.ghostedStorey = nextGhost;
+			await this.fragments.core.update(true);
+		} finally {
+			if (renderer) renderer.enabled = wasRendering;
+		}
+		if (Object.keys(inBand).length) {
+			const boxer = this.components.get(OBC.BoundingBoxer);
+			boxer.list.clear();
+			await boxer.addFromModelIdMap(inBand);
+			const box = boxer.get();
+			boxer.list.clear();
+			if (!box.isEmpty()) {
+				const sphere = box.getBoundingSphere(new THREE.Sphere());
+				await this.world.camera.controls.fitToSphere(sphere, true);
+			}
+		}
+	}
+	async closeStorey() {
+		await this.resetStoreyGhost();
+		await this.fragments.core.update(true);
+		await this.fit();
+	}
+	/**
+	* Assign every element to a storey from the model's real IFC spatial structure — the
+	* `IfcRelContainedInSpatialStructure` tags surfaced by the Classifier's `byIfcBuildingStorey`,
+	* grouped by storey name (the same key `openStorey`/`storeyBands` use). Cached once; reused by the
+	* ghosting delta and the per-storey footprints.
+	*
+	* We read the authored floor tags rather than guessing each element's storey from its centre
+	* elevation: band-guessing breaks when the model's origin is offset from world Y=0 (this villa hangs
+	* ~12.8 m below it), so the element boxes and the storey planes land in different frames, nothing
+	* falls in a band, and every floor click ended up un-ghosted.
+	*/
+	async ensureElementStoreys() {
+		if (this.elementStoreys) return this.elementStoreys;
+		const tagged = await this.storeysFromIfcTags();
+		this.elementStoreys = tagged.size ? tagged : await this.storeysFromElevationBands();
+		return this.elementStoreys;
+	}
+	/** Group every element by its containing IFCBUILDINGSTOREY (the `ContainsElements` relation),
+	*  keyed by the storey's Name — the same key `openStorey`/`storeyBands` use. Empty when the model has
+	*  no such relation. */
+	async storeysFromIfcTags() {
+		const classifier = this.components.get(OBC.Classifier);
+		await classifier.byIfcBuildingStorey();
+		const cache = /* @__PURE__ */ new Map();
+		const groups = classifier.list.get("Storeys");
+		if (!groups) return cache;
+		for (const [storeyName, group] of groups) for (const [modelId, localIds] of Object.entries(group.map)) {
+			let perId = cache.get(modelId);
+			if (!perId) {
+				perId = /* @__PURE__ */ new Map();
+				cache.set(modelId, perId);
+			}
+			for (const localId of localIds) perId.set(localId, storeyName);
+		}
+		return cache;
+	}
+	/** Fallback assignment: bucket each element into a storey by its centre elevation. Only correct when
+	*  the model geometry shares the frame of the storey planes (origin near world Y=0). */
+	async storeysFromElevationBands() {
+		const cache = /* @__PURE__ */ new Map();
+		for (const [modelId, model] of this.fragments.list) {
+			const ids = await model.getLocalIds();
+			if (!ids?.length) continue;
+			const boxes = await model.getBoxes(ids);
+			const perId = /* @__PURE__ */ new Map();
+			ids.forEach((localId, index) => {
+				const box = boxes[index];
+				if (!box) return;
+				const centreY = (box.min.y + box.max.y) / 2;
+				for (const [sid, band] of this.storeyBands) if (centreY >= band.min && centreY < band.max) {
+					perId.set(localId, sid);
+					break;
+				}
+			});
+			cache.set(modelId, perId);
+		}
+		return cache;
+	}
+	/**
+	* The world-space bounding box of each storey's own elements — the real footprint and height of
+	* every floor. Lets callers place things *inside* a level (e.g. worker markers) rather than across
+	* the whole building.
+	*/
+	async storeyFootprints() {
+		const assign = await this.ensureElementStoreys();
+		const byStorey = /* @__PURE__ */ new Map();
+		for (const [modelId, perId] of assign) for (const [localId, sid] of perId) {
+			let map = byStorey.get(sid);
+			if (!map) {
+				map = {};
+				byStorey.set(sid, map);
+			}
+			(map[modelId] ??= /* @__PURE__ */ new Set()).add(localId);
+		}
+		const result = {};
+		const boxer = this.components.get(OBC.BoundingBoxer);
+		for (const [sid, map] of byStorey) {
+			boxer.list.clear();
+			await boxer.addFromModelIdMap(map);
+			const box = boxer.get();
+			boxer.list.clear();
+			if (!box.isEmpty()) result[sid] = {
+				min: [
+					box.min.x,
+					box.min.y,
+					box.min.z
+				],
+				max: [
+					box.max.x,
+					box.max.y,
+					box.max.z
+				]
+			};
+		}
+		return result;
+	}
+	/** Clear the fade applied to non-selected storeys. */
+	async resetStoreyGhost() {
+		for (const [modelId, ids] of Object.entries(this.ghostedStorey)) {
+			const model = this.fragments.list.get(modelId);
+			if (model && ids.size) await model.resetHighlight([...ids]);
+		}
+		this.ghostedStorey = {};
+	}
+	/**
+	* Floor-only picking: GPU-pick the element under the pointer, resolve its storey, and report it so the
+	* host isolates that floor. Runs off the highlighter entirely, so element selection never fights the
+	* storey ghosting (which is what made floor→floor switching invert).
+	*/
+	async pickFloorAtPointer() {
+		if (!this.picker) return;
+		const hit = await this.picker.getItemAt();
+		if (this.disposed || !hit) return;
+		const storeyId = (await this.ensureElementStoreys()).get(hit.modelId)?.get(hit.localId);
+		if (storeyId) this.options.onStoreyPick?.(storeyId);
+	}
+	async publishSelection(map) {
+		this.selection = map;
+		const itemCount = Object.values(map).reduce((sum, ids) => sum + ids.size, 0);
+		const batches = await Promise.all(Object.entries(map).map(async ([modelId, localIds]) => {
+			const model = this.fragments.list.get(modelId);
+			return model ? model.getItemsData([...localIds]) : [];
+		}));
+		if (this.disposed) return;
+		const data = batches.flat();
+		const first = data[0];
+		this.options.onSelectionChange?.({
+			itemCount,
+			category: first?._category?.value ?? null,
+			guid: first?._guid?.value ?? null,
+			data
+		});
+	}
+	resize = () => {
+		if (this.disposed) return;
+		this.world.renderer?.resize();
+		this.world.camera.updateAspect();
+		this.cinematic?.resize();
+	};
+	pointerDownAt = null;
+	onPointerDown = (event) => {
+		this.pointerDownAt = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	};
+	onPointerUp = (event) => {
+		const start = this.pointerDownAt;
+		this.pointerDownAt = null;
+		if (!start) return;
+		if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > DRAG_TOLERANCE_PX) return;
+		if (this.options.selectFloorsOnly) {
+			this.pickFloorAtPointer();
+			return;
+		}
+		if (this.interaction) this.useArmedTool();
+	};
+	onDoubleClick = () => {
+		if (this.interaction && this.interaction !== "section") this.useArmedTool();
+	};
+	useArmedTool() {
+		if (this.disposed) return;
+		if (this.interaction === "section") {
+			this.clipper.create(this.world);
+			this.fragments.core.update(true);
+		} else if (this.interaction) this.measurements[this.interaction].create();
+	}
+	onKeyDown = (event) => {
+		if (event.code !== "Delete" && event.code !== "Backspace") return;
+		if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) return;
+		if (this.interaction && this.interaction !== "section") this.measurements[this.interaction].delete();
+		else this.clipper.delete(this.world);
+	};
+	ensureActive() {
+		if (this.disposed) throw new Error("FragmentViewport has been disposed");
+	}
+	/** Release the WebGL context and every listener. Must run on unmount or contexts leak. */
+	async dispose() {
+		if (this.disposed) return;
+		this.disposed = true;
+		this.resizeObserver.disconnect();
+		this.clearMarkers();
+		this.cinematic?.dispose();
+		this.container.removeEventListener("pointerdown", this.onPointerDown);
+		this.container.removeEventListener("pointerup", this.onPointerUp);
+		this.container.removeEventListener("dblclick", this.onDoubleClick);
+		window.removeEventListener("keydown", this.onKeyDown);
+		this.components.dispose();
+	}
+};
+//#endregion
+export { FragmentViewport };
+
+//# sourceMappingURL=runtime.mjs.map