View Decorations

/** Add a world decoration to display 3d graphics showing the project extents interspersed with the scene graphics. */
public decorate(context: DecorateContext): void {
  // Check view type, project extents is only applicable to show in spatial views.
  const vp = context.viewport;
  if (!vp.view.isSpatialView())
    return;

  const builder = context.createGraphicBuilder(GraphicType.WorldDecoration, undefined);
  // Set edge color to white or black depending on current view background color and set line weight to 2.
  builder.setSymbology(vp.getContrastToBackgroundColor(), ColorDef.black, 2);
  // Add range box edge geometry to builder.
  builder.addRangeBox(vp.iModel.projectExtents);
  context.addDecorationFromBuilder(builder);
}

/** A view decoration that draws a graphic created from a glTF asset. */
class GltfDecoration implements Decorator {
  /** A graphic created from a glTF asset. */
  private readonly _graphic: RenderGraphic;
  /** The tooltip to be displayed when the graphic is moused-over. */
  private readonly _tooltip: string;
  /** The Id of the graphic used for picking. */
  private readonly _pickableId: Id64String;

  public constructor(graphic: RenderGraphic, tooltip: string, pickableId: Id64String) {
    this._graphic = graphic;
    this._tooltip = tooltip;
    this._pickableId = pickableId;
  }

  /** Tell the display system not to recreate our graphics every time the mouse cursor moves. */
  public readonly useCachedDecorations = true;

  /** Draw our graphics into the viewport. */
  public decorate(context: DecorateContext): void {
    // Our graphics are defined in spatial coordinates so should only be drawn in a spatial view
    if (context.viewport.view.isSpatialView()) {
      // Produce a "scene" graphic so that it will be affected by lighting and other aspects of the viewport's display style.
      context.addDecoration(GraphicType.Scene, this._graphic);
    }
  }

  /** Return true if the specified Id matches our graphic's pickable Id. */
  public testDecorationHit(id: string): boolean {
    return id === this._pickableId;
  }

  /** Provide a tooltip when our graphic is moused-over. */
  public async getDecorationToolTip(): Promise<string> {
    return this._tooltip;
  }
}

/** Open a file picker to allow the user to select a .gltf or .glb file describing a glTF asset, convert the asset into a RenderGraphic,
 * then install a Decorator to display the graphic in the center of the project extents.
 * @param iModel The iModel with which the graphic will be associated. Any viewports viewing a spatial view of this iModel will be decorated with the glTF asset.
 * @returns true if the graphic was successfully created.
 */
export async function displayGltfAsset(iModel: IModelConnection): Promise<boolean> {
  // Allow the user to select the glTF asset.
  try {
    // We need to cast `window` to `any` because the TypeScript type definition doesn't expose the `showOpenFilePicker` function.
    const [handle] = await (window as any).showOpenFilePicker({
      types: [
        {
          description: "glTF",
          accept: { "model/*": [".gltf", ".glb"] },
        },
      ],
    });

    // Read the file's contents into memory.
    const file = await handle.getFile();
    const buffer = await file.arrayBuffer();

    // Allocate a new transient Id to identify the graphic so it can be picked.
    const id = iModel.transientIds.getNext();

    // Convert the glTF into a RenderGraphic.
    let graphic = await readGltfGraphics({
      gltf: new Uint8Array(buffer),
      iModel,
      pickableOptions: { id },
    });

    if (!graphic)
      return false;

    // Transform the graphic to the center of the project extents.
    const transform = Transform.createTranslation(iModel.projectExtents.center);
    const branch = new GraphicBranch();
    branch.add(graphic);
    graphic = IModelApp.renderSystem.createGraphicBranch(branch, transform);

    // Take ownership of the graphic so that it is not disposed of until we're finished with it.
    // By doing so we take responsibility for disposing of it ourselves.
    const owner = IModelApp.renderSystem.createGraphicOwner(graphic);

    // Install the decorator, using the file name as the tooltip.
    const decorator = new GltfDecoration(owner, file.name, id);
    IModelApp.viewManager.addDecorator(decorator);

    // When the iModel is closed, dispose of the graphic and uninstall the decorator.
    iModel.onClose.addOnce(() => {
      owner.disposeGraphic();
      IModelApp.viewManager.dropDecorator(decorator);
    });

    return true;
  } catch (_) {
    return false;
  }
}

protected _decoId?: string;

/** Add a pickable decoration that will display interspersed with the scene graphics. */
public decorate(context: DecorateContext): void {
  const vp = context.viewport;
  if (!vp.view.isSpatialView())
    return;

  // Get next available Id to represent our decoration for it's life span.
  if (undefined === this._decoId)
    this._decoId = vp.iModel.transientIds.getNext();

  const builder = context.createGraphicBuilder(GraphicType.WorldDecoration, undefined, this._decoId);
  builder.setSymbology(vp.getContrastToBackgroundColor(), ColorDef.black, 2);
  builder.addRangeBox(vp.iModel.projectExtents);
  context.addDecorationFromBuilder(builder);
}

/** Return true if supplied Id represents a pickable decoration created by this decorator. */
public testDecorationHit(id: string): boolean { return id === this._decoId; }

/** Return localized tooltip message for the decoration identified by HitDetail.sourceId. */
public async getDecorationToolTip(_hit: HitDetail): Promise<HTMLElement | string> { return "Project Extents"; }

/** Add a canvas decoration using CanvasRenderingContext2D to show a plus symbol. */
public decorate(context: DecorateContext): void {
  const vp = context.viewport;
  const size = Math.floor(vp.pixelsPerInch * 0.25) + 0.5;
  const sizeOutline = size + 1;
  const position = context.viewport.npcToView(NpcCenter);
  position.x = Math.floor(position.x) + 0.5;
  position.y = Math.floor(position.y) + 0.5;
  const drawDecoration = (ctx: CanvasRenderingContext2D) => {
    // Show black outline (with shadow) around white line for good visibility regardless of view background color.
    ctx.beginPath();
    ctx.strokeStyle = "rgba(0,0,0,.5)";
    ctx.lineWidth = 3;
    ctx.moveTo(-sizeOutline, 0);
    ctx.lineTo(sizeOutline, 0);
    ctx.moveTo(0, -sizeOutline);
    ctx.lineTo(0, sizeOutline);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = "white";
    ctx.lineWidth = 1;
    ctx.shadowColor = "black";
    ctx.shadowBlur = 5;
    ctx.moveTo(-size, 0);
    ctx.lineTo(size, 0);
    ctx.moveTo(0, -size);
    ctx.lineTo(0, size);
    ctx.stroke();
  };
  context.addCanvasDecoration({ position, drawDecoration });
}

class FancyDecorator {
  private _color: ColorDef; // the color of our shape decoration

  public set color(color: ColorDef): void {
    this._color = color;

    // Make sure our decorate method is called so we draw using the new color.
    // This also invalidates every other decorator's decorations!
    IModelApp.viewManager.invalidateDecorationsAllViews();
  }

  public decorate(context: DecorateContext): void {
    // ...draw a fancy shape using this._color
    // This gets called every single time the mouse moves,
    // and any other time the viewport's decorations become invalidated!
  }
}

class FancyDecorator {
  private _color: ColorDef; // the color of our shape decoration

  // Tell the viewport to cache our decorations.
  // We'll tell it when to regenerate them.
  public readonly useCachedDecorations = true;

  public set color(color: ColorDef): void {
    this._color = color;

    // Invalidate *only* this decorator's decorations.
    IModelApp.viewManager.invalidateCachedDecorationsAllViews(this);
  }

  public decorate(context: DecorateContext): void {
    // ...draw a fancy shape using this._color
    // This *only* gets called if the scene changed,
    // or if explicitly asked for our decorations to be regenerated.
  }
}