abstract-3d 2.12.2 → 3.0.0

package/src/renderers/ifc/ifc.ts

@@ -1,18 +1,125 @@
 import { Color, SRGBColorSpace } from "three";
-import type { Scene, Group, Material, Vec3 } from "../../abstract-3d.js";
-import { vec3Zero, vec3PosX, vec3PosY, vec3Rot, vec3TransRot, vec3RotCombine } from "../../abstract-3d.js";
+import type { Scene, Group, Material, Relation, Vec3 } from "../../abstract-3d.js";
+import { vec3Zero, vec3PosX, vec3PosY, vec3Rot, vec3Sub, vec3TransRot, vec3RotCombine, vec3RotInverse } from "../../abstract-3d.js";
 import type { MutableIfc } from "./ifc-encoding.js";
 import { add, guid, ifcFile, point, real, ref, refs, serialize, str } from "./ifc-encoding.js";
 import type { Polyline, Triangulation } from "./ifc-geometry.js";
 import { polyline, toIfc, triangulate } from "./ifc-geometry.js";
 
-/** Element classes with the same attributes as IfcBuildingElementProxy (GlobalId, ..., Tag, PredefinedType) */
-export type IfcElementEntity = "IfcBuildingElementProxy" | "IfcUnitaryEquipment";
+/** IFC4's PredefinedType values of the element classes, besides NOTDEFINED and USERDEFINED */
+type PredefinedTypes = {
+  readonly IfcBuildingElementProxy: "COMPLEX" | "ELEMENT" | "PARTIAL" | "PROVISIONFORVOID" | "PROVISIONFORSPACE";
+  readonly IfcBuildingElementPart: "INSULATION" | "PRECASTPANEL";
+  readonly IfcUnitaryEquipment: "AIRHANDLER" | "AIRCONDITIONINGUNIT" | "DEHUMIDIFIER" | "SPLITSYSTEM" | "ROOFTOPUNIT";
+  readonly IfcFan:
+    | "CENTRIFUGALFORWARDCURVED"
+    | "CENTRIFUGALRADIAL"
+    | "CENTRIFUGALBACKWARDINCLINEDCURVED"
+    | "CENTRIFUGALAIRFOIL"
+    | "TUBEAXIAL"
+    | "VANEAXIAL"
+    | "PROPELLORAXIAL";
+  readonly IfcFilter: "AIRPARTICLEFILTER" | "COMPRESSEDAIRFILTER" | "ODORFILTER" | "OILFILTER" | "STRAINER" | "WATERFILTER";
+  readonly IfcCoil:
+    | "DXCOOLINGCOIL"
+    | "ELECTRICHEATINGCOIL"
+    | "GASHEATINGCOIL"
+    | "HYDRONICCOIL"
+    | "STEAMHEATINGCOIL"
+    | "WATERCOOLINGCOIL"
+    | "WATERHEATINGCOIL";
+  readonly IfcAirToAirHeatRecovery:
+    | "FIXEDPLATECOUNTERFLOWEXCHANGER"
+    | "FIXEDPLATECROSSFLOWEXCHANGER"
+    | "FIXEDPLATEPARALLELFLOWEXCHANGER"
+    | "ROTARYWHEEL"
+    | "RUNAROUNDCOILLOOP"
+    | "HEATPIPE"
+    | "TWINTOWERENTHALPYRECOVERYLOOPS"
+    | "THERMOSIPHONSEALEDTUBEHEATEXCHANGERS"
+    | "THERMOSIPHONCOILTYPEHEATEXCHANGERS";
+  readonly IfcDamper:
+    | "BACKDRAFTDAMPER"
+    | "BALANCINGDAMPER"
+    | "BLASTDAMPER"
+    | "CONTROLDAMPER"
+    | "FIREDAMPER"
+    | "FIRESMOKEDAMPER"
+    | "FUMEHOODEXHAUST"
+    | "GRAVITYDAMPER"
+    | "GRAVITYRELIEFDAMPER"
+    | "RELIEFDAMPER"
+    | "SMOKEDAMPER";
+  readonly IfcDuctSilencer: "FLATOVAL" | "RECTANGULAR" | "ROUND";
+  readonly IfcHumidifier:
+    | "STEAMINJECTION"
+    | "ADIABATICAIRWASHER"
+    | "ADIABATICPAN"
+    | "ADIABATICWETTEDELEMENT"
+    | "ADIABATICATOMIZING"
+    | "ADIABATICULTRASONIC"
+    | "ADIABATICRIGIDMEDIA"
+    | "ADIABATICCOMPRESSEDAIRNOZZLE"
+    | "ASSISTEDELECTRIC"
+    | "ASSISTEDNATURALGAS"
+    | "ASSISTEDPROPANE"
+    | "ASSISTEDBUTANE"
+    | "ASSISTEDSTEAM";
+};
+
+/** An element class, all with the attributes GlobalId, ..., Tag, PredefinedType, and one of its PredefinedTypes, which defaults to NOTDEFINED */
+export type IfcEntity = {
+  readonly [E in keyof PredefinedTypes]: { readonly entity: E; readonly predefinedType?: PredefinedTypes[E] | "NOTDEFINED" };
+}[keyof PredefinedTypes];
 
-export type IfcElementClass = {
-  readonly entity: IfcElementEntity;
-  /** The entity's PredefinedType, e.g. "AIRHANDLER" for IfcUnitaryEquipment, defaults to "NOTDEFINED" */
-  readonly predefinedType?: string;
+/** IFC4's IfcDistributionSystemEnum, the system a port belongs to, it only connects to ports of the same system */
+export type IfcDistributionSystem =
+  | "AIRCONDITIONING"
+  | "AUDIOVISUAL"
+  | "CHEMICAL"
+  | "CHILLEDWATER"
+  | "COMMUNICATION"
+  | "COMPRESSEDAIR"
+  | "CONDENSERWATER"
+  | "CONTROL"
+  | "CONVEYING"
+  | "DATA"
+  | "DISPOSAL"
+  | "DOMESTICCOLDWATER"
+  | "DOMESTICHOTWATER"
+  | "DRAINAGE"
+  | "EARTHING"
+  | "ELECTRICAL"
+  | "ELECTROACOUSTIC"
+  | "EXHAUST"
+  | "FIREPROTECTION"
+  | "FUEL"
+  | "GAS"
+  | "HAZARDOUS"
+  | "HEATING"
+  | "LIGHTING"
+  | "LIGHTNINGPROTECTION"
+  | "MUNICIPALSOLIDWASTE"
+  | "OIL"
+  | "OPERATIONAL"
+  | "POWERGENERATION"
+  | "RAINWATER"
+  | "REFRIGERATION"
+  | "SECURITY"
+  | "SEWAGE"
+  | "SIGNAL"
+  | "STORMWATER"
+  | "TELEPHONE"
+  | "TV"
+  | "VACUUM"
+  | "VENT"
+  | "VENTILATION"
+  | "WASTEWATER"
+  | "WATERSUPPLY";
+
+export type IfcPortType = {
+  readonly predefinedType: "CABLE" | "CABLECARRIER" | "DUCT" | "PIPE";
+  readonly systemType?: IfcDistributionSystem;
 };
 
 export type IfcApplicationInfo = {
@@ -31,16 +138,10 @@ export type IfcOptions = {
   readonly organization?: string;
   /** Application that produced the scene, e.g. `{ name: "airCalc ACOM", version: "10.1" }`, defaults to Abstract 3D by Divid AB */
   readonly application?: IfcApplicationInfo;
-  /**
-   * Wraps the whole scene in one element, e.g. `{ entity: "IfcUnitaryEquipment", predefinedType: "AIRHANDLER", name: "AHU" }`, otherwise the
-   * top-level groups are placed directly in the storey
-   */
-  readonly root?: IfcElementClass & { readonly name: string };
-  /**
-   * Layer of a group's shapes, from the `data` of every group from the root down to this group, this group last; groups without `data` are skipped
-   * and the root element of `root` comes first. Undefined or "" keeps the layer of the group above
-   */
-  readonly layer?: (path: ReadonlyArray<Record<string, string>>) => string | undefined;
+  /** The class of a group that becomes an element, e.g. `{ entity: "IfcFan" }`, IfcBuildingElementProxy when undefined */
+  readonly entity?: (group: Group) => IfcEntity | undefined;
+  /** The type of a relation's ports, e.g. `{ predefinedType: "DUCT", systemType: "VENTILATION" }`, NOTDEFINED when undefined */
+  readonly port?: (relation: Relation) => IfcPortType | undefined;
 };
 
 /** A triangulated mesh or a line, `type` is the RepresentationType of the shape representation it's written in */
@@ -51,41 +152,39 @@ type NodeMesh = { readonly material: Material; readonly layer: string | undefine
 
 const representationTypes = ["Tessellation", "Curve3D"] as const;
 
-/** The `data` of the groups from the root down to a group and the layer its meshes are on */
-type Layering = {
-  readonly layerOf: IfcOptions["layer"];
-  readonly path: ReadonlyArray<Record<string, string>>;
-  readonly layer: string | undefined;
-};
-
 /** A group that becomes an element, groups without any triangulated geometry or lines in them are left out */
 type ElementNode = {
   readonly group: Group;
-  readonly elementClass: IfcElementClass;
   readonly pos: Vec3;
   readonly rot: Vec3;
   readonly meshes: ReadonlyArray<NodeMesh>;
   readonly children: ReadonlyArray<ElementNode>;
 };
 
-const proxyClass: IfcElementClass = { entity: "IfcBuildingElementProxy" };
+/** A written element with its placement and where it is in the scene, after the scene's center and rotation */
+type IfcElement = { readonly element: number; readonly placement: number; readonly pos: Vec3; readonly rot: Vec3 };
 
 /**
  * `owner` is the encoded GlobalId and OwnerHistory every IfcRoot entity starts with, call it once per entity since the GlobalId must be unique.
- * `layers` are the representation items (face sets and polylines) on each layer
+ * `layers` are the representation items (face sets and polylines) on each layer, `elements` the written elements by their group's id and `ports` the
+ * ports nested in each element
  */
 type IfcContext = {
   readonly body: number;
   readonly owner: (id?: string) => string;
+  readonly entity: IfcOptions["entity"];
   readonly styles: Map<string, number>;
   readonly layers: Map<string, Array<number>>;
+  readonly elements: Map<string, IfcElement>;
+  readonly ports: Map<number, Array<number>>;
 };
 
 /**
  * IFC4 (Reference View) with every mesh as an IfcTriangulatedFaceSet and every line as an IfcPolyline without thickness, in millimetres. Every
- * top-level group and every group with a `data.id` or `data.name` becomes an IfcBuildingElementProxy placed relative to its parent element and
- * aggregated into it. Other groups are only transforms or metadata, so their meshes are merged into the parent element. With `layer`, the face sets
- * and polylines are assigned to an IfcPresentationLayerAssignment per layer, the presentation layer of the Reference View
+ * top-level group and every group with an `id` or `name` becomes an element of the class `entity` gives it, an IfcBuildingElementProxy by default,
+ * placed relative to its parent element and aggregated into it. Other groups are only transforms, so their meshes are merged into the parent element.
+ * The face sets and polylines are on an IfcPresentationLayerAssignment per `layer`. Every relation becomes an IfcDistributionPort nested in each of
+ * the elements of its groups, with the flow leaving `from` and entering `to`, and the two ports of a relation with both are connected
  */
 export function render(scene: Scene, options: IfcOptions = {}): string {
   const name = options.name ?? "Abstract 3D";
@@ -99,7 +198,15 @@ export function render(scene: Scene, options: IfcOptions = {}): string {
   const world = axisPlacement(m, vec3Zero, vec3Zero);
   const context = add(m, `IFCGEOMETRICREPRESENTATIONCONTEXT($,'Model',3,1.E-05,${ref(world)},$)`);
   const body = add(m, `IFCGEOMETRICREPRESENTATIONSUBCONTEXT('Body','Model',*,*,*,*,${ref(context)},$,.MODEL_VIEW.,$)`);
-  const c: IfcContext = { body, owner: (id) => `${str(guid(m, id))},${ref(ownerHistory)}`, styles: new Map(), layers: new Map() };
+  const c: IfcContext = {
+    body,
+    owner: (id) => `${str(guid(m, id))},${ref(ownerHistory)}`,
+    entity: options.entity,
+    styles: new Map(),
+    layers: new Map(),
+    elements: new Map(),
+    ports: new Map(),
+  };
   const units = [
     add(m, "IFCSIUNIT(*,.LENGTHUNIT.,.MILLI.,.METRE.)"),
     add(m, "IFCSIUNIT(*,.AREAUNIT.,$,.SQUARE_METRE.)"),
@@ -120,17 +227,16 @@ export function render(scene: Scene, options: IfcOptions = {}): string {
 
   const center = scene.center_deprecated ?? vec3Zero;
   const sceneRot = scene.rotation_deprecated ?? vec3Zero;
-  const top: Layering = { layerOf: options.layer, path: [], layer: undefined };
-  const rootGroup: Group | undefined = options.root && { pos: center, rot: sceneRot, groups: scene.groups, data: { name: options.root.name } };
-  const nodes = rootGroup
-    ? [elementNode(rootGroup, center, sceneRot, groupLayering(rootGroup, top), options.root)]
-    : scene.groups.map((g) =>
-        elementNode(g, vec3TransRot(g.pos, center, sceneRot), vec3RotCombine(sceneRot, g.rot ?? vec3Zero), groupLayering(g, top))
-      );
-  const elements = nodes.flatMap((node) => node ?? []).map((node, i) => element(m, node, `${i + 1}`, storeyPlacement, c));
+  const elements = mergeSameId(scene.groups)
+    .flatMap((g) => elementNode(g, vec3TransRot(g.pos, center, sceneRot), vec3RotCombine(sceneRot, g.rot ?? vec3Zero), g.layer) ?? [])
+    .map((node, i) => element(m, node, `${i + 1}`, { element: storey, placement: storeyPlacement, pos: vec3Zero, rot: vec3Zero }, c));
   if (elements.length > 0) {
     add(m, `IFCRELCONTAINEDINSPATIALSTRUCTURE(${c.owner()},$,$,${refs(elements)},${ref(storey)})`);
   }
+  for (const relation of scene.relations ?? []) {
+    relationPorts(m, relation, center, sceneRot, options.port, c);
+  }
+  c.ports.forEach((ports, e) => add(m, `IFCRELNESTS(${c.owner()},$,$,${ref(e)},${refs(ports)})`));
   c.layers.forEach((items, layer) => add(m, `IFCPRESENTATIONLAYERASSIGNMENT(${str(layer)},$,${refs(items)},$)`));
 
   const date = now.toISOString().split(".")[0] ?? "1970-01-01T00:00:00";
@@ -149,71 +255,148 @@ function ownerHistoryEntity(m: MutableIfc, author: string, organization: string,
   return add(m, `IFCOWNERHISTORY(${ref(user)},${ref(app)},$,.ADDED.,${timestamp},$,$,${timestamp})`);
 }
 
-/** `layering` is the group's own, see `groupLayering` */
-function elementNode(group: Group, pos: Vec3, rot: Vec3, layering: Layering, elementClass = proxyClass): ElementNode | undefined {
-  const { meshes, children } = elementContent(group, vec3Zero, vec3Zero, layering);
-  return meshes.length > 0 || children.length > 0 ? { group, elementClass, pos, rot, meshes, children } : undefined;
+/** `layer` is the group's own or the one it inherits */
+function elementNode(group: Group, pos: Vec3, rot: Vec3, layer: string | undefined): ElementNode | undefined {
+  const { meshes, children } = elementContent(group, vec3Zero, vec3Zero, layer);
+  return meshes.length > 0 || children.length > 0 ? { group, pos, rot, meshes, children } : undefined;
 }
 
 /**
- * Meshes of the group and its descendants that aren't elements, relative to the element the group is at pos/rot in, and the descendants with a
- * `data.id` or `data.name` as elements
+ * Meshes of the group and its descendants that aren't elements, relative to the element the group is at pos/rot in, and the descendants with an `id`
+ * or `name` as elements
  */
-function elementContent(group: Group, pos: Vec3, rot: Vec3, layering: Layering): Pick<ElementNode, "meshes" | "children"> {
-  const meshes = (group.meshes ?? []).flatMap((mesh): ReadonlyArray<NodeMesh> => {
-    const { material } = mesh;
-    const { layer } = layering;
-    const triangulation = triangulate(mesh.geometry, pos, rot);
-    const line = polyline(mesh.geometry, pos, rot);
+function elementContent(group: Group, pos: Vec3, rot: Vec3, layer: string | undefined): Pick<ElementNode, "meshes" | "children"> {
+  const meshes = (group.meshes ?? []).flatMap(({ material, geometry }): ReadonlyArray<NodeMesh> => {
+    const triangulation = triangulate(geometry, pos, rot);
+    const line = polyline(geometry, pos, rot);
     return triangulation
       ? [{ type: "Tessellation", material, layer, triangulation }]
       : line
         ? [{ type: "Curve3D", material, layer, polyline: line }]
         : [];
   });
-  const nested = (group.groups ?? []).map((child) => {
+  const nested = mergeSameId(group.groups ?? []).map((child) => {
     const childPos = vec3TransRot(child.pos, pos, rot);
     const childRot = vec3RotCombine(rot, child.rot ?? vec3Zero);
-    const childLayering = groupLayering(child, layering);
-    return child.data?.["id"] !== undefined || child.data?.["name"] !== undefined
-      ? { meshes: [], children: [elementNode(child, childPos, childRot, childLayering)].flatMap((node) => node ?? []) }
-      : elementContent(child, childPos, childRot, childLayering);
+    const childLayer = child.layer ?? layer;
+    return child.id !== undefined || child.name !== undefined
+      ? { meshes: [], children: [elementNode(child, childPos, childRot, childLayer)].flatMap((node) => node ?? []) }
+      : elementContent(child, childPos, childRot, childLayer);
   });
-  return { meshes: [...meshes, ...nested.flatMap((n) => n.meshes)], children: nested.flatMap((n) => n.children) };
+  return {
+    meshes: [...meshes, ...nested.flatMap((n) => n.meshes)],
+    children: nested.flatMap((n) => n.children),
+  };
 }
 
-/** Groups with `data` are added to the path and get the layer `layerOf` returns for it, if any, otherwise the layer of the parent */
-function groupLayering(group: Group, parent: Layering): Layering {
-  const data = group.data;
-  if (data === undefined || Object.keys(data).length === 0) {
-    return parent;
-  }
-  const path = [...parent.path, data];
-  const layer = parent.layerOf?.(path);
-  return { ...parent, path, layer: layer === undefined || layer === "" ? parent.layer : layer };
+/** Sibling groups with the same `id` as one group at the origin, with the first's name, description, layer and data, and the groups as its parts */
+function mergeSameId(groups: ReadonlyArray<Group>): ReadonlyArray<Group> {
+  return groups.flatMap((g, i) => {
+    const same = g.id === undefined ? [] : groups.filter((s) => s.id === g.id);
+    if (same.length < 2) {
+      return [g];
+    }
+    return groups.findIndex((s) => s.id === g.id) === i
+      ? [
+          {
+            id: g.id,
+            name: g.name,
+            description: g.description,
+            layer: g.layer,
+            data: g.data,
+            pos: vec3Zero,
+            groups: same.map((s) => ({ ...s, id: undefined, name: undefined })),
+          },
+        ]
+      : [];
+  });
 }
 
-/** `path` is the element's position in the tree (e.g. "2.1"), named after it when the group has no `data.name` or `data.id` since IFC requires a name */
-function element(m: MutableIfc, node: ElementNode, path: string, parentPlacement: number, c: IfcContext): number {
-  const placement = add(m, `IFCLOCALPLACEMENT(${ref(parentPlacement)},${ref(axisPlacement(m, node.pos, node.rot))})`);
-  const representations = representationTypes.flatMap((type) => {
-    const items = node.meshes.filter((mesh) => mesh.type === type).map((mesh) => representationItem(m, mesh, c));
-    return items.length > 0 ? [add(m, `IFCSHAPEREPRESENTATION(${ref(c.body)},'Body',${str(type)},${refs(items)})`)] : [];
-  });
-  const shape = representations.length > 0 ? ref(add(m, `IFCPRODUCTDEFINITIONSHAPE($,$,${refs(representations)})`)) : "$";
-  const id = node.group.data?.["id"];
-  const name = node.group.data?.["name"] ?? id ?? `Element ${path}`;
-  const { entity, predefinedType = "NOTDEFINED" } = node.elementClass;
-  const ifcElement = add(m, `${entity.toUpperCase()}(${c.owner(id)},${str(name)},$,$,${ref(placement)},${shape},${str(id)},.${predefinedType}.)`);
+/**
+ * `path` is the element's position in the tree (e.g. "2.1"), named after it when the group has no `name` or `id` since IFC requires a name. `parent`
+ * is the element or storey the element is placed and aggregated in
+ */
+function element(m: MutableIfc, node: ElementNode, path: string, parent: IfcElement, c: IfcContext): number {
+  const placement = add(m, `IFCLOCALPLACEMENT(${ref(parent.placement)},${ref(axisPlacement(m, node.pos, node.rot))})`);
+  const { id, name = id ?? `Element ${path}`, description } = node.group;
+  const { entity, predefinedType = "NOTDEFINED" } = c.entity?.(node.group) ?? { entity: "IfcBuildingElementProxy" };
+  const ifcElement = add(
+    m,
+    `${entity.toUpperCase()}(${c.owner(id)},${str(name)},${str(description)},$,${ref(placement)},${representation(m, node.meshes, c)},${str(id)},.${predefinedType}.)`
+  );
+  const written: IfcElement = {
+    element: ifcElement,
+    placement,
+    pos: vec3TransRot(node.pos, parent.pos, parent.rot),
+    rot: vec3RotCombine(parent.rot, node.rot),
+  };
+  if (id !== undefined) {
+    c.elements.set(id, written);
+  }
   aggregate(
     m,
     c,
     ifcElement,
-    node.children.map((child, i) => element(m, child, `${path}.${i + 1}`, placement, c))
+    node.children.map((child, i) => element(m, child, `${path}.${i + 1}`, written, c))
   );
   return ifcElement;
 }
 
+/**
+ * A port nested in the element of each of the relation's groups that is one, placed relative to it, and the two ports connected when both are. The
+ * relation's groups are its shape, merged into the first port relative to its placement, groups in them with an `id` or `name` are left out
+ */
+function relationPorts(m: MutableIfc, relation: Relation, center: Vec3, sceneRot: Vec3, portType: IfcOptions["port"], c: IfcContext): void {
+  const pos = vec3TransRot(relation.pos, center, sceneRot);
+  const rot = vec3RotCombine(sceneRot, relation.rot ?? vec3Zero);
+  const portInverse = vec3RotInverse(rot);
+  const { predefinedType = "NOTDEFINED", systemType } = portType?.(relation) ?? {};
+  const ends = [
+    { e: relation.from === undefined ? undefined : c.elements.get(relation.from), flow: "SOURCE" },
+    { e: relation.to === undefined ? undefined : c.elements.get(relation.to), flow: "SINK" },
+  ].flatMap(({ e, flow }) => (e ? [{ e, flow }] : []));
+  const ports = ends.map(({ e, flow }, i) => {
+    const inverse = vec3RotInverse(e.rot);
+    const placement = add(
+      m,
+      `IFCLOCALPLACEMENT(${ref(e.placement)},${ref(axisPlacement(m, vec3Rot(vec3Sub(pos, e.pos), vec3Zero, inverse), vec3RotCombine(inverse, rot)))})`
+    );
+    const meshes =
+      i === 0
+        ? (relation.groups ?? []).flatMap((g) => {
+            const groupPos = vec3Rot(vec3Sub(vec3TransRot(g.pos, center, sceneRot), pos), vec3Zero, portInverse);
+            const groupRot = vec3RotCombine(portInverse, vec3RotCombine(sceneRot, g.rot ?? vec3Zero));
+            return elementContent(g, groupPos, groupRot, g.layer).meshes;
+          })
+        : [];
+    // Each port's id is the relation's with its flow, so they're kept between exports
+    const port = add(
+      m,
+      `IFCDISTRIBUTIONPORT(${c.owner(`${relation.id}_${flow}`)},${str(relation.name)},$,$,${ref(placement)},${representation(m, meshes, c)},.${flow}.,.${predefinedType}.,${systemType === undefined ? "$" : `.${systemType}.`})`
+    );
+    const nested = c.ports.get(e.element);
+    if (nested) {
+      nested.push(port);
+    } else {
+      c.ports.set(e.element, [port]);
+    }
+    return port;
+  });
+  const [relating, related] = ports;
+  if (relating !== undefined && related !== undefined) {
+    add(m, `IFCRELCONNECTSPORTS(${c.owner()},$,$,${ref(relating)},${ref(related)},$)`);
+  }
+}
+
+/** The encoded IfcProductDefinitionShape with a shape representation per representation type, or $ without meshes */
+function representation(m: MutableIfc, meshes: ReadonlyArray<NodeMesh>, c: IfcContext): string {
+  const representations = representationTypes.flatMap((type) => {
+    const items = meshes.filter((mesh) => mesh.type === type).map((mesh) => representationItem(m, mesh, c));
+    return items.length > 0 ? [add(m, `IFCSHAPEREPRESENTATION(${ref(c.body)},'Body',${str(type)},${refs(items)})`)] : [];
+  });
+  return representations.length > 0 ? ref(add(m, `IFCPRODUCTDEFINITIONSHAPE($,$,${refs(representations)})`)) : "$";
+}
+
 /** One face set or polyline per mesh, so meshes on different layers are never in the same item */
 function representationItem(m: MutableIfc, mesh: NodeMesh, c: IfcContext): number {
   const [item, style] =

package/src/renderers/react/index.ts

@@ -1,7 +1,6 @@
 export * from "./react.js";
 export * from "./react-types.js";
 export type { SceneMouseEvent } from "./react-scene.js";
-export type { HotSpotInfo } from "./react-hotspot.js";
 export type { CameraType, Camera, ControlsHelper } from "./react-camera.js";
 export type { MaterialState } from "./react-material.js";
 export { ERROR_IMG_KEY } from "./react-material.js";

package/src/renderers/react/react-dimension.tsx

@@ -7,7 +7,7 @@ import { ReactMesh } from "./react-mesh.js";
 
 type DimensionCallbacks = {
   readonly selectedIds?: Record<string, boolean> | undefined;
-  readonly hotSpotsActive?: boolean;
+  readonly relationsActive?: boolean;
   readonly onClickGroup?: (id: string | undefined, rootData: undefined, data: undefined, e: ThreeEvent<MouseEvent>) => void;
   readonly onHoverGroup?: (id: string | undefined, rootData: undefined, data: undefined, e: ThreeEvent<MouseEvent>) => void;
   readonly onContextMenuGroup?: (id: string, rootData: undefined, data: undefined, left: number, top: number, e: ThreeEvent<MouseEvent>) => void;
@@ -56,7 +56,7 @@ export function ReactDimension({
   children,
   sceneRotation,
   selectedIds,
-  hotSpotsActive,
+  relationsActive,
   onClickGroup,
   onHoverGroup,
   onContextMenuGroup,
@@ -69,7 +69,7 @@ export function ReactDimension({
   readonly _sceneCenter: Vec3 | undefined;
 } & DimensionCallbacks): React.JSX.Element {
   const [hovered, setHovered] = React.useState<boolean>(false);
-  const id = hotSpotsActive || !onClickGroup ? undefined : dimension.id;
+  const id = relationsActive || !onClickGroup ? undefined : dimension.id;
   const highlighted = !!id && (hovered || !!selectedIds?.[id]);
   const dim = dimensionConvertToTypeMesh(highlighted ? { ...dimension, material: selectMat } : dimension, sceneRotation ?? vec3Zero, material);
   return visible ? (

package/src/renderers/react/react-group.test.ts

@@ -6,7 +6,7 @@ const base: ReactGroupProps = {
   g: group([]),
   hoveredIdsExternal: undefined,
   selectedIds: { a: true },
-  hotSpotsActive: false,
+  relationsActive: false,
   activeComponents: { a: "Error" },
   id: "a",
   rootData: undefined,
@@ -39,7 +39,7 @@ describe("groupPropsEqual", () => {
   it("is not equal when another prop changes identity", () => {
     expect(groupPropsEqual(base, { ...base, g: group([]) })).toBe(false);
     expect(groupPropsEqual(base, { ...base, onClickGroup: () => undefined })).toBe(false);
-    expect(groupPropsEqual(base, { ...base, hotSpotsActive: true })).toBe(false);
+    expect(groupPropsEqual(base, { ...base, relationsActive: true })).toBe(false);
     expect(groupPropsEqual(base, { ...base, id: "b" })).toBe(false);
   });
 

package/src/renderers/react/react-group.tsx

@@ -17,7 +17,7 @@ function ReactGroupBase({
   materialStateImages,
   hoveredIdsExternal,
   selectedIds,
-  hotSpotsActive,
+  relationsActive,
   activeComponents,
   useAlphaTest,
   id,
@@ -59,7 +59,7 @@ function ReactGroupBase({
   const selected = selectedIds?.[id ?? ""];
 
   const materialState = activeComponents?.[id ?? ""];
-  const disabled = hotSpotsActive && materialState !== "Accept";
+  const disabled = relationsActive && materialState !== "Accept";
   return (
     <group
       rotation={[g.rot?.x ?? 0, g.rot?.y ?? 0, g.rot?.z ?? 0]}
@@ -101,7 +101,7 @@ function ReactGroupBase({
           key={createGroupKey ? createGroupKey(g, i, rootData, id ?? "") : i}
           g={g}
           selectedIds={selectedIds}
-          hotSpotsActive={hotSpotsActive}
+          relationsActive={relationsActive}
           activeComponents={activeComponents}
           materialStateImages={materialStateImages}
           hoveredIdsExternal={hoveredIdsExternal}
@@ -158,7 +158,8 @@ export type ReactGroupProps = {
   readonly hoveredIdsExternal: ReadonlyArray<string> | undefined;
   readonly hoveredParent?: boolean;
   readonly selectedIds: Record<string, boolean> | undefined;
-  readonly hotSpotsActive: boolean;
+  /** Relations are active, e.g. to pick one to insert a component on, so only the groups whose material state is Accept can be clicked */
+  readonly relationsActive: boolean;
   readonly useAlphaTest?: boolean;
   readonly activeComponents: Record<string, MaterialState> | undefined;
   readonly id: string | undefined;

package/src/renderers/react/react-material.tsx

@@ -15,7 +15,7 @@ export function ReactMaterial({
   disabled,
   materialState,
   isText,
-  isHotSpot,
+  isRelation,
   drawBackOnly,
 }: {
   readonly material: Material;
@@ -24,7 +24,7 @@ export function ReactMaterial({
   readonly disabled?: boolean;
   readonly materialState?: MaterialState | undefined;
   readonly isText: boolean;
-  readonly isHotSpot?: boolean;
+  readonly isRelation?: boolean;
   readonly drawBackOnly?: boolean;
 }): React.JSX.Element {
   const mat = !materialState ? material : materialState === "Accept" ? acceptMat : materialState === "Error" ? errorMar : warningMat;
@@ -41,10 +41,10 @@ export function ReactMaterial({
       />
     );
   }
-  if (isHotSpot) {
+  if (isRelation) {
     return (
       <meshBasicMaterial
-        key="mesh_material_hotspot"
+        key="mesh_material_relation"
         color={getColor(selected, hovered, mat, selectMat)}
         side={drawBackOnly === true ? BackSide : DoubleSide}
         depthTest={true}

package/src/renderers/react/react-relation.tsx

@@ -0,0 +1,86 @@
+import type { ThreeEvent } from "@react-three/fiber";
+import React from "react";
+import type { Group, Relation } from "../../abstract-3d.js";
+import { vec3Scale } from "../../abstract-3d.js";
+import { ReactMaterial } from "./react-material.js";
+import { ReactMesh } from "./react-mesh.js";
+
+const outlineMat = { normal: "rgb(0, 0, 0)", opacity: 1.0 };
+
+/** The shape of each active relation, e.g. where a component can be inserted on an air relation, clickable and darker when hovered */
+export const ReactRelations = React.memo(
+  ({
+    relations,
+    activeRelations,
+    onClickRelation,
+  }: {
+    readonly relations: ReadonlyArray<Relation> | undefined;
+    readonly activeRelations: ReadonlyArray<string> | undefined;
+    readonly onClickRelation?: (relation: Relation, e: ThreeEvent<MouseEvent>) => void;
+  }): React.JSX.Element => (
+    <>
+      {relations
+        ?.filter((r) => activeRelations?.includes(r.id))
+        .map((r) => (
+          <ReactRelation key={r.id} relation={r} onClickRelation={onClickRelation} />
+        ))}
+    </>
+  )
+);
+
+function ReactRelation({
+  relation,
+  onClickRelation,
+}: {
+  readonly relation: Relation;
+  readonly onClickRelation?: (relation: Relation, e: ThreeEvent<MouseEvent>) => void;
+}): React.JSX.Element {
+  const [hovered, setHovered] = React.useState<boolean>(false);
+  return (
+    <group
+      onClick={(e) => {
+        if (onClickRelation) {
+          e.stopPropagation();
+          onClickRelation(relation, e);
+        }
+      }}
+      onPointerOver={(e) => {
+        e.stopPropagation();
+        document.body.style.cursor = "pointer";
+        setHovered(true);
+      }}
+      onPointerOut={() => {
+        document.body.style.cursor = "auto";
+        setHovered(false);
+      }}
+      onContextMenu={(e) => e.stopPropagation()}
+    >
+      {relation.groups?.map((g, i) => (
+        <ReactRelationGroup key={i} g={g} hovered={hovered} />
+      ))}
+    </group>
+  );
+}
+
+/** A group of a relation's shape, unlit, with a black outline around its boxes */
+function ReactRelationGroup({ g, hovered }: { readonly g: Group; readonly hovered: boolean }): React.JSX.Element {
+  return (
+    <group position={[g.pos.x, g.pos.y, g.pos.z]} rotation={[g.rot?.x ?? 0, g.rot?.y ?? 0, g.rot?.z ?? 0]}>
+      {g.meshes?.map((m, i) => (
+        <React.Fragment key={i}>
+          <ReactMesh mesh={m}>
+            <ReactMaterial isText={false} isRelation={true} material={m.material} hovered={hovered} />
+          </ReactMesh>
+          {m.geometry.type === "Box" && (
+            <ReactMesh mesh={{ ...m, geometry: { ...m.geometry, size: vec3Scale(m.geometry.size, 1.0125) } }}>
+              <ReactMaterial isText={false} isRelation={true} drawBackOnly={true} material={outlineMat} hovered={hovered} />
+            </ReactMesh>
+          )}
+        </React.Fragment>
+      ))}
+      {g.groups?.map((c, i) => (
+        <ReactRelationGroup key={i} g={c} hovered={hovered} />
+      ))}
+    </group>
+  );
+}