@combeenation/3d-viewer 12.4.1 → 13.0.0

package/src/api/classes/element.ts

@@ -1,766 +0,0 @@
-import {
-  activateTransformNode as activate,
-  addToHighlightLayer,
-  addToShadowGenerator,
-  assertMeshCapability,
-  assertTransformNode,
-  cloneTransformNode,
-  cloneTransformNodeMaterial,
-  deactivateTransformNode as deactivate,
-  drawPaintableOnMaterial,
-  getClientRectFromMesh,
-  injectMetadata,
-  mapToDottedNodes,
-  removeFromHighlightLayer,
-  removeFromShadowGenerator,
-  setMaterial,
-  setMaterialColor,
-  setMaterialMetallness,
-  setMaterialRoughness,
-  setReceiveShadows,
-  transformTransformNode,
-} from '../util/babylonHelper';
-import { createImageFromImgSrc, createImageFromSvg } from '../util/resourceHelper';
-import { addMissingMaterialObserver } from '../util/sceneLoaderHelper';
-import { VariantParameterizable } from './../classes/variantParameterizable';
-import { DottedPath } from './dottedPath';
-import { Event } from './event';
-import { Parameter } from './parameter';
-import { Variant } from './variant';
-import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
-import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';
-import { Light } from '@babylonjs/core/Lights/light';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
-import { Material } from '@babylonjs/core/Materials/material';
-import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
-import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { Tags } from '@babylonjs/core/Misc/tags';
-import { has, isArray, isNumber, merge, union } from 'lodash-es';
-
-/**
- * An {@link Element} of a {@link Variant}. Acts as a container for diverse definitions. Lives only in the context of a
- * {@link Variant}.
- *
- * When used in typings, refer to via its alias {@link VariantElement} to prevent name clashes with the web APIs
- * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) class
- */
-export class Element extends VariantParameterizable {
-  public readonly nodes: TransformNode[] = [];
-
-  protected readonly _dottedNodes: Map<DottedPath, TransformNode> = new Map();
-
-  protected _highlightLayer?: HighlightLayer;
-
-  /**
-   * Constructor.
-   */
-  protected constructor(public readonly variant: Variant, public readonly name: string) {
-    super(variant, name);
-    if (process.env.NODE_ENV === 'development') {
-      this.assertPathDefinitions();
-    }
-    const nodes = this.variant.inheritedNodes.map(node => {
-      const nodeNamingStrategy = {
-        handler: variant.viewer.nodeNamingStrategyHandler,
-        payload: {
-          variantInstance: variant.variantInstance!,
-          variant: variant,
-          variantParameterizable: this,
-        },
-      };
-      return cloneTransformNode(node, nodeNamingStrategy, this.filterNode.bind(this), true);
-    });
-
-    // when cloning an instanced mesh the source mesh is still referencing to the source of the original mesh
-    // this is wrong, as we want to reference the cloned source
-    // this can only be done after the cloning process of the whole tree is finished, as we can't be sure if all
-    // instanced meshes or all sources meshes are cloning prior
-    const reassignSourceMesh = (node: TransformNode) => {
-      if (node instanceof InstancedMesh) {
-        // find the cloned instance and source mesh
-        const clonedInstance = node as InstancedMesh;
-        const originalInstance = clonedInstance.metadata.cloneSource as InstancedMesh;
-        const originalSource = originalInstance.sourceMesh;
-        const clonedSource = originalSource.metadata.cloneTarget;
-        // it's not possible to just exchange the source mesh => readonly property
-        // we have to create a new clone with the correct source mesh
-        const exchangedInstance = clonedInstance.clone(clonedInstance.name, clonedInstance.parent, true, clonedSource);
-
-        // fix enabled and tags state after cloning
-        exchangedInstance.setEnabled(clonedInstance.isEnabled(false));
-        if (Tags.HasTags(clonedInstance)) {
-          Tags.AddTagsTo(exchangedInstance, Tags.GetTags(clonedInstance, true));
-        }
-
-        // re-reference the childs of the cloned instance as well
-        const childs = clonedInstance.getChildTransformNodes(true);
-        childs.forEach(child => (child.parent = exchangedInstance));
-
-        // old instance mesh is not needed anymore and can be disposed
-        clonedInstance.dispose();
-      }
-
-      // recurse into childs
-      const children = node.getChildTransformNodes(true);
-      children.forEach(reassignSourceMesh);
-    };
-
-    nodes.forEach(node => {
-      if (node) {
-        reassignSourceMesh(node);
-      }
-    });
-
-    this.nodes = nodes.filter(node => !!node) as TransformNode[];
-    this._dottedNodes = mapToDottedNodes<TransformNode>(this.nodes, node => node instanceof TransformNode);
-    variant.broadcastEvent(Event.ELEMENT_NODES_CLONED, this);
-    this.addMissingMaterialObservers();
-    this.addParameterObservers();
-  }
-
-  /**
-   * Creates an {@link Element} with given name.
-   */
-  public static async create(variant: Variant, name: string): Promise<Element> {
-    const element = new Element(variant, name);
-    variant.broadcastEvent(Event.ELEMENT_CREATED, element);
-    return element;
-  }
-
-  /**
-   * The {@link DottedPath} in the built tree of {@link Element}s.
-   * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
-   */
-  get dottedPath(): DottedPath {
-    return DottedPath.create(this.variant.dottedPath).addPart(this.name);
-  }
-
-  /**
-   * The id representing a {@link DottedPath}.
-   */
-  get id(): string {
-    const dottedPath = DottedPath.create(this.dottedPath);
-    dottedPath.shiftPart(); // remove root
-    return dottedPath.path;
-  }
-
-  /**
-   * The {@link ElementDefinition} of the {@link Element}.
-   */
-  get definition(): ElementDefinition {
-    const definition = this.variant.structureJson.elements![this.name];
-    if (isArray(definition)) {
-      return {
-        paths: {
-          include: definition,
-        },
-      } as ElementDefinition;
-    }
-    return definition as ElementDefinition;
-  }
-
-  /**
-   * The {@link PathDefinitions} of the {@link Element}.
-   */
-  get pathDefinitions(): PathDefinitions {
-    return this.definition.paths;
-  }
-
-  /**
-   * The {@link TraceableDefinitions} of the {@link Element}.
-   */
-  get traceableDefinitions(): TraceableDefinitions {
-    return this.definition.traceables || {};
-  }
-
-  /**
-   * The {@link PaintableDefinition} of the {@link Element}.
-   */
-  get paintableDefinitions(): PaintableDefinitions {
-    return this.definition.paintables || {};
-  }
-
-  /**
-   * The inherited {@link ParameterBag}.
-   * Merges the {@link Variant}'s parameters and those from the {@link Element}.
-   */
-  get inheritedParameters(): ParameterBag {
-    return merge({}, this.variant.inheritedParameters, this.parameters);
-  }
-
-  /**
-   * The actual {@link TransformNode}s that make up this {@link Element}.
-   */
-  get nodesFlat(): TransformNode[] {
-    return this.nodes.reduce(
-      (acc, cur) => [...acc, ...(cur.getChildren(n => n instanceof TransformNode, false) as TransformNode[])],
-      this.nodes
-    );
-  }
-
-  /**
-   * The actual {@link Mesh}es that make up this {@link Element}.
-   * Handy for e.g. creating a bounding box around an entire element.
-   */
-  get meshesFlat(): Mesh[] {
-    return this.nodes.reduce(
-      (acc, cur) => [...acc, ...(cur.getChildren(n => n instanceof Mesh, false) as Mesh[])],
-      this.nodes.filter(n => n instanceof Mesh) as Mesh[]
-    );
-  }
-
-  /**
-   * The actual {@link AbstractMesh}es that make up this {@link Element}.
-   * I.e. (real) Meshes as well as InstancedMeshes.
-   */
-  get abstractMeshesFlat(): AbstractMesh[] {
-    return this.nodes.reduce(
-      (acc, cur) => [...acc, ...(cur.getChildren(n => n instanceof AbstractMesh, false) as AbstractMesh[])],
-      this.nodes.filter(n => n instanceof AbstractMesh) as AbstractMesh[]
-    );
-  }
-
-  /**
-   * The meshes of this {@link Element}.
-   */
-  get meshes(): Mesh[] {
-    return this.nodes.filter(node => node instanceof Mesh) as Mesh[];
-  }
-
-  /**
-   * @protected
-   */
-  set highlightLayer(layer: HighlightLayer | undefined) {
-    this._highlightLayer = layer;
-  }
-
-  get highlightLayer(): HighlightLayer | undefined {
-    return this._highlightLayer;
-  }
-
-  /**
-   * Destroys this {@link Element} and dispose all nodes.
-   */
-  public destroy(): Element {
-    this.nodes.forEach(node => {
-      node.dispose();
-    });
-    return this;
-  }
-
-  /**
-   * Gets a node by its {@link DottedPath}.
-   */
-  public getNode(dottedPath: DottedPathArgument): TransformNode {
-    const _dottedPath = DottedPath.create(dottedPath);
-    const keys = Array.from(this._dottedNodes.keys()).map(dp => dp.path);
-    const values = Array.from(this._dottedNodes.values());
-    const node = values[keys.indexOf(_dottedPath.path)];
-    if (!node) {
-      throw new Error(`Node with path "${_dottedPath.path}" does not exist for element "${this.id}".`);
-    }
-    return node;
-  }
-
-  /**
-   * Gets a mesh by its {@link DottedPath}.
-   */
-  public async getMesh(dottedPath: DottedPathArgument): Promise<Mesh | null> {
-    const node = await this.getNode(dottedPath);
-    if (node instanceof Mesh) {
-      return node;
-    }
-    return null;
-  }
-
-  /**
-   * Gets a {@link PaintableDefinition} by its name.
-   */
-  public getPaintableDefinition(name: string): PaintableDefinition {
-    if (!this.paintableDefinitions || !this.paintableDefinitions[name]) {
-      throw new Error(`No paintable "${name}" defined for element "${this.id}".`);
-    }
-    return this.paintableDefinitions[name];
-  }
-
-  /**
-   * Gets a {@link TraceableDefinition} by its name.
-   */
-  public getTraceableDefinition(name: string): TraceableDefinition {
-    if (!this.traceableDefinitions || !this.traceableDefinitions[name]) {
-      throw new Error(`No traceable "${name}" defined to add observer in element "${this.id}".`);
-    }
-    return this.traceableDefinitions[name];
-  }
-
-  /**
-   * Gets the paintable Node by its name.
-   */
-  public getPaintableNode(name: string): TransformNode {
-    return this.getNode(this.getPaintableDefinition(name).path);
-  }
-
-  /**
-   * Gets the traceable Node by its name.
-   */
-  public getTraceableNode(name: string): TransformNode {
-    return this.getNode(this.getTraceableDefinition(name).path);
-  }
-
-  /**
-   * @see {@link VariantParameterizable.commitParameters}
-   * @emit {@link Event.ELEMENT_PARAMETER_COMMITTED}
-   */
-  public async commitParameters(parameters?: ParameterBag): Promise<VariantParameterizable> {
-    return super.commitParameters(parameters);
-  }
-
-  /**
-   * Adds an observer function for camera matrix changes.
-   * The `observer` gets 2 parameters: the `AbstractMesh` and a `ClientRect` object.
-   */
-  public addTraceableObserver(traceable: string, observer: CallableFunction, payload?: any): Element {
-    if (payload && !(payload instanceof HTMLElement)) {
-      throw new Error(`Payload for camera observer must be an instance of "HTMLElement" in element "${this.id}".`);
-    }
-    if (!this.traceableDefinitions || !this.traceableDefinitions[traceable]) {
-      throw new Error(`No traceable "${traceable}" defined to add observer in element "${this.id}".`);
-    }
-    const node = this.getTraceableNode(traceable);
-    if (!(node instanceof AbstractMesh)) {
-      throw new Error(`The path must be an instance of "AbstractMesh" for camera observer in element "${this.id}".`);
-    }
-    this.variant.viewer.sceneManager.activeCamera.onViewMatrixChangedObservable.add((eventData, eventState) => {
-      const position = getClientRectFromMesh(node, this.variant.viewer.scene, this.variant.viewer.canvas);
-      if (payload) {
-        payload.style.top = `${position.top}px`;
-        payload.style.left = `${position.left}px`;
-      }
-      observer(node, position);
-    });
-    return this;
-  }
-
-  /**
-   * Draws a `ImageBitmap` or `OffscreenCanvas` onto a `paintable` defined via {@link PaintableDefinition}.
-   */
-  public drawPaintable(paintable: string, imageSource: HTMLImageElement): Element {
-    // node and material checks and preperation
-    const node = this.getPaintableNode(paintable);
-    if (!(node instanceof AbstractMesh)) {
-      throw new Error(
-        `The path must be an instance of "AbstractMesh" for paintable "${paintable}" ` + `in element "${this.id}".`
-      );
-    }
-
-    if (node.material && this.variant.viewer.cloneMaterialsOnMutation) {
-      if (node.material && !has(node.metadata, 'dirty.material')) {
-        cloneTransformNodeMaterial(node);
-      }
-      if (!has(node.metadata, 'dirty.material.texture')) {
-        // inject initial value and mark as dirty
-        injectMetadata(node, { dirty: { material: { texture: true } } });
-      }
-    } else if (!node.material) {
-      // paintables should also work if no material is assigned to the node per default
-      // in this case a certain fallback material with fitting default values is defined
-      const pbrMat = new PBRMaterial(`${this.id}.${paintable}.material`, this.variant.viewer.scene);
-      pbrMat.roughness = 1.0;
-      pbrMat.metallic = 1.0;
-      node.material = pbrMat;
-    }
-
-    // TODO: Not sure if this really should be overwritten every time the paintable is redrawn.
-    // Maybe the 3D artist had something in mind when setting a certain transparency mode, which would get overwritten
-    // in this case.
-    // Applying it as a default if no material is set is fine though (see roughness/metallic some lines above).
-    // Removing this line will most likely break existing configurators, so be cautios!
-    node.material.transparencyMode = Material.MATERIAL_ALPHATESTANDBLEND;
-
-    const paintableDefinition = this.getPaintableDefinition(paintable);
-    if (isNumber(paintableDefinition.textureOptions)) {
-      // convert into object to satisfy the interface of `drawPaintableOnMaterial`
-      paintableDefinition.textureOptions = {
-        width: paintableDefinition.textureOptions,
-        height: paintableDefinition.textureOptions,
-      };
-    }
-
-    // convert texture size options into scale values, as the scaling is now done via uvScale properties
-    const paintableOptions: PaintableOptions = {};
-    if (paintableDefinition.textureOptions.width) {
-      paintableOptions.uScale = paintableDefinition.textureOptions.width / (imageSource.width as number);
-    }
-    if (paintableDefinition.textureOptions.height) {
-      paintableOptions.vScale = paintableDefinition.textureOptions.height / (imageSource.height as number);
-    }
-
-    // forward to generic "paintable" call
-    drawPaintableOnMaterial(node.material, imageSource, this.variant.viewer.scene, paintableOptions);
-
-    return this;
-  }
-
-  /**
-   * Draws a SVG string onto a `paintable` defined via {@link PaintableDefinition}.
-   */
-  public async drawPaintableFromSvg(paintable: string, svgSource: string): Promise<Element> {
-    const image = await createImageFromSvg(svgSource);
-    return this.drawPaintable(paintable, image);
-  }
-
-  /**
-   * Draws an Image from source (URL/URI) onto a `paintable` defined via {@link PaintableDefinition}.
-   */
-  public async drawPaintableFromImgSrc(paintable: string, imgSource: string): Promise<Element> {
-    const image = await createImageFromImgSrc(imgSource);
-    return this.drawPaintable(paintable, image);
-  }
-
-  /**
-   * Adds observers for loading missing materials where needed
-   */
-  protected addMissingMaterialObservers() {
-    for (const abstractMesh of this.abstractMeshesFlat) {
-      addMissingMaterialObserver(abstractMesh);
-    }
-  }
-
-  /**
-   * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
-   */
-  protected addParameterObservers(): Element {
-    this._parameterObservers.set(Parameter.VISIBLE, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        let visible;
-        try {
-          visible = Parameter.parseBoolean(newValue);
-        } catch (e) {
-          return;
-        }
-        if (visible === true) {
-          // Override visible state and materials if tag manager is in use to support texture lazy loading
-          if (element.variant.viewer.tagManager.parameters.size > 0) {
-            const hiddenNodeNames: string[] = [];
-            element.variant.viewer.tagManager.parameters.forEach((parameterBag, subject) => {
-              const nodes = element.variant.viewer.tagManager.getNodesBySubject(subject);
-              const visibleParamValue = parameterBag[Parameter.VISIBLE];
-              const isVisible = undefined === visibleParamValue || Parameter.parseBoolean(visibleParamValue);
-              if (!isVisible) {
-                hiddenNodeNames.push(...nodes.map(node => node.name));
-              }
-              // overwrite materials immediatly, so that original material of node doesn't get loaded, since it could
-              // be exchanged by the tag manager
-              if (parameterBag[Parameter.MATERIAL]) {
-                nodes.forEach(node => setMaterial(node, parameterBag[Parameter.MATERIAL], false));
-              }
-            });
-            // enable all nodes that are not explicitely hidden by the tag manager
-            element.nodesFlat.map(node => {
-              if (!hiddenNodeNames.includes(node.name)) {
-                node.setEnabled(true);
-              }
-            });
-            return;
-          }
-          // The default behaviour.
-          element.nodes.forEach(node => {
-            injectMetadata(node, { visibility: node.isEnabled() });
-            activate(node);
-          });
-        } else if (visible === false) {
-          element.nodes.forEach(node => {
-            injectMetadata(node, { visibility: node.isEnabled() });
-            deactivate(node);
-          });
-        }
-      },
-    ]);
-    this._parameterObservers.set(Parameter.SCALING, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        // we have to deal just with root nodes here due to relative impacts in a node tree
-        element.nodes.forEach(node =>
-          transformTransformNode(node, {
-            scaling: Parameter.parseVector(newValue),
-            position: Parameter.parseVector(
-              element.inheritedParameters[Parameter.POSITION] || Parameter.getDefaultValue(Parameter.POSITION)
-            ),
-            rotation: Parameter.parseRotation(
-              element.inheritedParameters[Parameter.ROTATION] || Parameter.getDefaultValue(Parameter.ROTATION)
-            ),
-          })
-        );
-      },
-    ]);
-    this._parameterObservers.set(Parameter.POSITION, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        // we have to deal just with root nodes here due to relative impacts in a node tree
-        element.nodes.forEach(node =>
-          transformTransformNode(node, {
-            scaling: Parameter.parseVector(
-              element.inheritedParameters[Parameter.SCALING] || Parameter.getDefaultValue(Parameter.SCALING)
-            ),
-            position: Parameter.parseVector(newValue),
-            rotation: Parameter.parseRotation(
-              element.inheritedParameters[Parameter.ROTATION] || Parameter.getDefaultValue(Parameter.ROTATION)
-            ),
-          })
-        );
-      },
-    ]);
-    this._parameterObservers.set(Parameter.ROTATION, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        // we have to deal just with root nodes here due to relative impacts in a node tree
-        element.nodes.forEach(node =>
-          transformTransformNode(node, {
-            scaling: Parameter.parseVector(
-              element.inheritedParameters[Parameter.SCALING] || Parameter.getDefaultValue(Parameter.SCALING)
-            ),
-            position: Parameter.parseVector(
-              element.inheritedParameters[Parameter.POSITION] || Parameter.getDefaultValue(Parameter.POSITION)
-            ),
-            rotation: Parameter.parseRotation(newValue),
-          })
-        );
-      },
-    ]);
-    this._parameterObservers.set(Parameter.MATERIAL, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        const materialName = newValue.toString();
-        for (const node of element.nodes) {
-          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL));
-          setMaterial(node, materialName, true, element.variant);
-        }
-      },
-    ]);
-    this._parameterObservers.set(Parameter.MATERIAL_COLOR, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        const color = Parameter.parseColor(newValue);
-        element.nodes.forEach(node => {
-          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL_COLOR));
-          if (this.variant.viewer.cloneMaterialsOnMutation) {
-            if (!has(node.metadata, 'dirty.material')) {
-              cloneTransformNodeMaterial(node);
-            }
-            if (!has(node.metadata, 'dirty.material.color')) {
-              // inject initial value and mark as dirty
-              injectMetadata(node, { dirty: { material: { color: oldValue } } });
-            }
-          }
-          setMaterialColor(node, color);
-        });
-      },
-    ]);
-    this._parameterObservers.set(Parameter.MATERIAL_METALLNESS, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        const metallness = Parameter.parseNumber(newValue);
-        element.nodes.forEach(node => {
-          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL_METALLNESS));
-          if (this.variant.viewer.cloneMaterialsOnMutation) {
-            if (!has(node.metadata, 'dirty.material')) {
-              cloneTransformNodeMaterial(node);
-            }
-            if (!has(node.metadata, 'dirty.material.metallness')) {
-              // inject initial value and mark as dirty
-              injectMetadata(node, { dirty: { material: { metallness: oldValue } } });
-            }
-          }
-          setMaterialMetallness(node, metallness);
-        });
-      },
-    ]);
-    this._parameterObservers.set(Parameter.MATERIAL_ROUGHNESS, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        const roughness = Parameter.parseNumber(newValue);
-        element.nodes.forEach(node => {
-          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL_ROUGHNESS));
-          if (this.variant.viewer.cloneMaterialsOnMutation) {
-            if (!has(node.metadata, 'dirty.material')) {
-              cloneTransformNodeMaterial(node);
-            }
-            if (!has(node.metadata, 'dirty.material.roughness')) {
-              // inject initial value and mark as dirty
-              injectMetadata(node, { dirty: { material: { roughness: oldValue } } });
-            }
-          }
-          setMaterialRoughness(node, roughness);
-        });
-      },
-    ]);
-    this._parameterObservers.set(Parameter.HIGHLIGHT_COLOR, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        // trigger Parameter.HIGHLIGHTED observers
-        this._parameterObservers.get(Parameter.HIGHLIGHTED)?.forEach(observer => {
-          observer(element, !!element.highlighted, !!element.highlighted);
-        });
-      },
-    ]);
-    this._parameterObservers.set(Parameter.HIGHLIGHT_ENABLED, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        let curr;
-        try {
-          curr = Parameter.parseBoolean(newValue);
-        } catch (e) {
-          return;
-        }
-        switch (curr) {
-          case true:
-            if (element._highlightLayer) {
-              break;
-            }
-            element.highlightLayer = new HighlightLayer(
-              DottedPath.create(element.id).addPart('highlight').path,
-              element.variant.viewer.scene
-            );
-            break;
-          case false:
-            element.highlightLayer?.dispose();
-            break;
-        }
-      },
-    ]);
-    this._parameterObservers.set(Parameter.HIGHLIGHTED, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        if (!element.inheritedParameters[Parameter.HIGHLIGHT_ENABLED]) {
-          return;
-        }
-        // trigger Parameter.HIGHLIGHT_ENABLED observers to ensure HighlightLayer
-        this._parameterObservers.get(Parameter.HIGHLIGHT_ENABLED)?.forEach(observer => {
-          observer(element, this.parameters[Parameter.HIGHLIGHT_ENABLED], true);
-        });
-        let highlighted;
-        try {
-          highlighted = Parameter.parseBoolean(newValue);
-        } catch (e) {
-          return;
-        }
-        // Add/Remove meshes to previously created highlight layers.
-        if (highlighted === true) {
-          element.nodes.forEach(node => {
-            assertTransformNode(node, node => assertMeshCapability(node, Parameter.HIGHLIGHTED));
-            let color = Color3.Green();
-            if (element.inheritedParameters[Parameter.HIGHLIGHT_COLOR]) {
-              color = Parameter.parseColor(element.inheritedParameters[Parameter.HIGHLIGHT_COLOR]);
-            }
-            if (typeof element._highlightLayer !== 'undefined') {
-              addToHighlightLayer(element._highlightLayer, color, node);
-            }
-          });
-        } else if (highlighted === false) {
-          element.nodes.forEach(node => {
-            if (typeof element._highlightLayer !== 'undefined') {
-              removeFromHighlightLayer(element._highlightLayer, node);
-            }
-          });
-        }
-      },
-    ]);
-    this._parameterObservers.set(Parameter.CAST_SHADOW, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        let castShadow;
-        try {
-          castShadow = Parameter.parseBoolean(newValue);
-        } catch (e) {
-          return;
-        }
-        let lightCsl = element.inheritedParameters[Parameter.CAST_SHADOW_FROM_LIGHTS];
-        if (!lightCsl) {
-          lightCsl = element.variant.inheritedViewerLights.map(l => l.name).join(',');
-        }
-        if (castShadow === true) {
-          await this.castShadowValueHandler(lightCsl, addToShadowGenerator);
-        }
-        if (castShadow === false) {
-          await this.castShadowValueHandler(lightCsl, removeFromShadowGenerator);
-        }
-      },
-    ]);
-    this._parameterObservers.set(Parameter.CAST_SHADOW_FROM_LIGHTS, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        // TODO: Possible performance issue in combination with CAST_SHADOW, since both observers are initially called
-        //       when CAST_SHADOW and CAST_SHADOW_FROM_LIGHTS are defined in the spec.
-        const lightCsl = element.variant.inheritedViewerLights.map(l => l.name).join(',');
-        // cleanup all shadow generators
-        await this.castShadowValueHandler(lightCsl, removeFromShadowGenerator);
-        if (element.castShadow === true) {
-          // if newValue is undefined or '' then set newValue to lightCsl (use all lights)
-          if (!newValue) {
-            newValue = lightCsl;
-          }
-          await this.castShadowValueHandler(newValue, addToShadowGenerator);
-        }
-      },
-    ]);
-    this._parameterObservers.set(Parameter.RECEIVE_SHADOWS, [
-      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
-        element.nodes.forEach(node => setReceiveShadows(node, Parameter.parseBoolean(newValue)));
-      },
-    ]);
-    return this;
-  }
-
-  /**
-   * Filter for nodes that are not defined or excluded in the `pathDefinitions`.
-   */
-  protected filterNode(node: TransformNode): boolean {
-    let includeTokens: string[] = [];
-    this.pathDefinitions.include.forEach(dottedPath => {
-      includeTokens = union(includeTokens, DottedPath.create(dottedPath).leafTokens);
-    });
-    const shallKeep = (dp: DottedPath) => {
-      const isDirectlyIncluded = !!includeTokens.find(_dp => _dp === dp.path);
-      const isSubOfIncluded = !!this.pathDefinitions.include.find(_dp => {
-        return dp.path.startsWith(`${_dp}${DottedPath.DELIMITER}`);
-      });
-      return isDirectlyIncluded || isSubOfIncluded;
-    };
-    const shallExclude = (dp: DottedPath) => {
-      if (!this.pathDefinitions.exclude) {
-        return false;
-      }
-      return !!this.pathDefinitions.exclude.find(_dp => dp.path === _dp);
-    };
-    return shallKeep(node.metadata.dottedPath) && !shallExclude(node.metadata.dottedPath);
-  }
-
-  /**
-   * Asserts whether all {@link pathDefinitions} link to a valid `Node` path.
-   * @protected
-   */
-  protected assertPathDefinitions() {
-    const dottedNodes = this.variant.inheritedDottedNodes;
-    if (dottedNodes.size === 0) {
-      throw new Error(`There are no mapped nodes for element "${this.id}".`);
-    }
-    const include = this.pathDefinitions.include.map(path => DottedPath.create(path).path);
-    const exclude = this.pathDefinitions.exclude?.map(path => DottedPath.create(path).path);
-    const keys = Array.from(dottedNodes.keys()).map(dottedPath => dottedPath.path);
-    union<string>(include, exclude).forEach(path => {
-      if (keys.indexOf(path) === -1) {
-        throw new Error(`Node with path "${path}" does not exist for element "${this.id}".`);
-      }
-    });
-  }
-
-  /**
-   * Handles callback for given light parameter.
-   */
-  private async castShadowValueHandler(lightCsl: ParameterValue, mutator: CallableFunction) {
-    const lights: Light[] = [];
-    for (const lightName of Parameter.parseCommaSeparatedList(lightCsl)) {
-      const viewerLight = await this.variant.getViewerLight(lightName);
-      if (viewerLight) {
-        lights.push(viewerLight.light);
-      }
-    }
-    const shadowGenerators = lights.map(light => light?.getShadowGenerator() as ShadowGenerator).filter(Boolean);
-    shadowGenerators.forEach(generator => {
-      this.nodes.forEach(node => {
-        mutator(generator, node);
-      });
-    });
-  }
-}