How to use @bentley/imodeljs-frontend - 10 common examples

public onLoad(_args: string[]): void {
    // don't register the namespace and the tool until the onLoad method. That's called after we know the versions of the modules required are good.
    this._measureNamespace = IModelApp.i18n.registerNamespace("MeasureTool");
    this._measureNamespace.readFinished.then(() => { MeasurePointsTool.register(this._measureNamespace); })
      .catch((err) => { console.log(err); });
  }

this._measureNamespace!.readFinished.then(() => {
      // restart the tool.
      console.log("MeasurePoints onExecute called, args", args);
      IModelApp.tools.run("Measure.Points");
    })
      .catch((err) => { console.log(err); });

async function renderAsync(vp: ScreenViewport, numFrames: number, timings: Array>): Promise {
  IModelApp.viewManager.addViewport(vp);

  const target = vp.target as Target;
  const metrics = target.performanceMetrics!;
  target.performanceMetrics = undefined;

  const numFramesToIgnore = 120;
  let ignoreFrameCount = 0;
  let frameCount = 0;
  vp.continuousRendering = true;
  return new Promise((resolve: () => void, _reject) => {
    const timer = new StopWatch();
    const removeListener = vp.onRender.addListener((_) => {
      // Ignore the first N frames - they seem to have more variable frame rate.
      ++ignoreFrameCount;
      if (ignoreFrameCount <= numFramesToIgnore) {
        if (ignoreFrameCount === numFramesToIgnore) {

public run(_args: any[]): boolean {
    const vp = IModelApp.viewManager.selectedView;
    if (undefined !== vp)
      emulateVersionComparison(vp); // tslint:disable-line:no-floating-promises

    return true;
  }
}

protected provideToolAssistance(): void {
    const mainInstruction = ToolAssistance.createInstruction(ToolAssistanceImage.CursorClick, IModelApp.i18n.translate("SampleApp:tools.Tool2.Prompts.GetPoint"));

    const instruction1 = ToolAssistance.createInstruction(ToolAssistanceImage.CursorClick, "Click on something", true);
    const instruction2 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A"]), "Press a key");
    const instruction3 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A", "B"]), "Press one of two keys", true);
    const instruction4 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["W"], ["A", "S", "D"]), "Press one of four keys");
    const instruction5 = ToolAssistance.createKeyboardInstruction(ToolAssistance.shiftKeyboardInfo, "Press the Shift key", true);
    const instruction6 = ToolAssistance.createKeyboardInstruction(ToolAssistance.ctrlKeyboardInfo, "Press the Ctrl key");
    const instruction7 = ToolAssistance.createKeyboardInstruction(ToolAssistance.altKeyboardInfo, "Press the Alt key");

    const section1 = ToolAssistance.createSection([instruction1, instruction2, instruction3, instruction4, instruction5, instruction6, instruction7], ToolAssistance.inputsLabel);

    const instruction21 = ToolAssistance.createInstruction(ToolAssistanceImage.AcceptPoint, "Accept result");
    const instruction22 = ToolAssistance.createInstruction(ToolAssistanceImage.MouseWheel, "Use mouse wheel");
    // cSpell:disable
    const instruction23 = ToolAssistance.createInstruction(ToolAssistanceImage.LeftClick, "Left click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.");
    const instruction24 = ToolAssistance.createInstruction(ToolAssistanceImage.RightClick, "Right click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
    // cSpell:enable
    const section2 = ToolAssistance.createSection([instruction21, instruction22, instruction23, instruction24], "More Inputs");

    const instructions = ToolAssistance.createInstructions(mainInstruction, [section1, section2]);

    IModelApp.notifications.setToolAssistance(instructions);
  }

const instruction1 = ToolAssistance.createInstruction(ToolAssistanceImage.CursorClick, "Click on something", true);
    const instruction2 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A"]), "Press a key");
    const instruction3 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A", "B"]), "Press one of two keys", true);
    const instruction4 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["W"], ["A", "S", "D"]), "Press one of four keys");
    const instruction5 = ToolAssistance.createKeyboardInstruction(ToolAssistance.shiftKeyboardInfo, "Press the Shift key", true);
    const instruction6 = ToolAssistance.createKeyboardInstruction(ToolAssistance.ctrlKeyboardInfo, "Press the Ctrl key");
    const instruction7 = ToolAssistance.createKeyboardInstruction(ToolAssistance.altKeyboardInfo, "Press the Alt key");

    const section1 = ToolAssistance.createSection([instruction1, instruction2, instruction3, instruction4, instruction5, instruction6, instruction7], ToolAssistance.inputsLabel);

    const instruction21 = ToolAssistance.createInstruction(ToolAssistanceImage.AcceptPoint, "Accept result");
    const instruction22 = ToolAssistance.createInstruction(ToolAssistanceImage.MouseWheel, "Use mouse wheel");
    // cSpell:disable
    const instruction23 = ToolAssistance.createInstruction(ToolAssistanceImage.LeftClick, "Left click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.");
    const instruction24 = ToolAssistance.createInstruction(ToolAssistanceImage.RightClick, "Right click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
    // cSpell:enable
    const section2 = ToolAssistance.createSection([instruction21, instruction22, instruction23, instruction24], "More Inputs");

    const instructions = ToolAssistance.createInstructions(mainInstruction, [section1, section2]);

    IModelApp.notifications.setToolAssistance(instructions);
  }

protected provideToolAssistance(): void {
    const mainInstruction = ToolAssistance.createInstruction(ToolAssistanceImage.CursorClick, IModelApp.i18n.translate("SampleApp:tools.Tool2.Prompts.GetPoint"));

    const instruction1 = ToolAssistance.createInstruction(ToolAssistanceImage.CursorClick, "Click on something", true);
    const instruction2 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A"]), "Press a key");
    const instruction3 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A", "B"]), "Press one of two keys", true);
    const instruction4 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["W"], ["A", "S", "D"]), "Press one of four keys");
    const instruction5 = ToolAssistance.createKeyboardInstruction(ToolAssistance.shiftKeyboardInfo, "Press the Shift key", true);
    const instruction6 = ToolAssistance.createKeyboardInstruction(ToolAssistance.ctrlKeyboardInfo, "Press the Ctrl key");
    const instruction7 = ToolAssistance.createKeyboardInstruction(ToolAssistance.altKeyboardInfo, "Press the Alt key");

    const section1 = ToolAssistance.createSection([instruction1, instruction2, instruction3, instruction4, instruction5, instruction6, instruction7], ToolAssistance.inputsLabel);

    const instruction21 = ToolAssistance.createInstruction(ToolAssistanceImage.AcceptPoint, "Accept result");
    const instruction22 = ToolAssistance.createInstruction(ToolAssistanceImage.MouseWheel, "Use mouse wheel");
    // cSpell:disable
    const instruction23 = ToolAssistance.createInstruction(ToolAssistanceImage.LeftClick, "Left click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.");
    const instruction24 = ToolAssistance.createInstruction(ToolAssistanceImage.RightClick, "Right click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");

protected provideToolAssistance(): void {
    const mainInstruction = ToolAssistance.createInstruction(ToolAssistanceImage.CursorClick, IModelApp.i18n.translate("SampleApp:tools.Tool2.Prompts.GetPoint"));

    const instruction1 = ToolAssistance.createInstruction(ToolAssistanceImage.CursorClick, "Click on something", true);
    const instruction2 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A"]), "Press a key");
    const instruction3 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["A", "B"]), "Press one of two keys", true);
    const instruction4 = ToolAssistance.createKeyboardInstruction(ToolAssistance.createKeyboardInfo(["W"], ["A", "S", "D"]), "Press one of four keys");
    const instruction5 = ToolAssistance.createKeyboardInstruction(ToolAssistance.shiftKeyboardInfo, "Press the Shift key", true);
    const instruction6 = ToolAssistance.createKeyboardInstruction(ToolAssistance.ctrlKeyboardInfo, "Press the Ctrl key");
    const instruction7 = ToolAssistance.createKeyboardInstruction(ToolAssistance.altKeyboardInfo, "Press the Alt key");

    const section1 = ToolAssistance.createSection([instruction1, instruction2, instruction3, instruction4, instruction5, instruction6, instruction7], ToolAssistance.inputsLabel);

    const instruction21 = ToolAssistance.createInstruction(ToolAssistanceImage.AcceptPoint, "Accept result");
    const instruction22 = ToolAssistance.createInstruction(ToolAssistanceImage.MouseWheel, "Use mouse wheel");
    // cSpell:disable
    const instruction23 = ToolAssistance.createInstruction(ToolAssistanceImage.LeftClick, "Left click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.");
    const instruction24 = ToolAssistance.createInstruction(ToolAssistanceImage.RightClick, "Right click. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
    // cSpell:enable
    const section2 = ToolAssistance.createSection([instruction21, instruction22, instruction23, instruction24], "More Inputs");

    const instructions = ToolAssistance.createInstructions(mainInstruction, [section1, section2]);

    IModelApp.notifications.setToolAssistance(instructions);
  }

return {
      name: ToolWithSettings._stateName,
      displayLabel: IModelApp.i18n.translate("SampleApp:tools.ToolWithSettings.Prompts.State"),
      typename: "string",
      editor: {
        params: [{
          type: PropertyEditorParamTypes.InputEditorSize,
          size: 4,
          /* maxLength: 60,*/
        } as InputEditorSizeParams,
        ],
      },
    };
  }

  private _stateValue = new ToolSettingsValue("PA");

  public get state(): string {
    return this._stateValue.value as string;
  }

  public set state(option: string) {
    this._stateValue.value = option;
  }

  // ------------- text based edit field ---------------
  private static _coordinateName = "coordinate";
  private static _getCoordinateDescription = (): PropertyDescription => {
    return {
      name: ToolWithSettings._coordinateName,
      displayLabel: IModelApp.i18n.translate("SampleApp:tools.ToolWithSettings.Prompts.Coordinate"),
      typename: "string",

public onClosed(): void {
    if (undefined === IModelApp.viewManager.selectedView) {
      IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Closing iModel..."));
      this._imodel.closeSnapshot().then(() => IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "iModel closed."))); // tslint:disable-line:no-floating-promises
    }
  }
}