How to use @bentley/ui-abstract - 10 common examples

To help you get started, we’ve selected a few @bentley/ui-abstract examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / tools / UiProviderTool.ts View on Github

// console.log(`Requesting tools for toolbar ${toolBarId}`);

    if ("[ViewsFrontstage]ToolWidget-horizontal" === toolBarId) {
      const simpleActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "simple-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "simple-test-action-tool",
      };

      const childActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "child-test-action-tool",
        condition: {
          type: ConditionalDisplayType.Visibility,
          testFunc: (): boolean => SampleAppIModelApp.getTestProperty() !== "HIDE",
          syncEventIds: [SampleAppUiActionId.setTestProperty],
        },
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "child-test-action-tool",
      };

      const nestedActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / tools / UiProviderTool.ts View on Github

} else if ("[ViewsFrontstage]NavigationWidget-horizontal" === toolBarId) {
      const navHorizontalSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "nav1-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "test action tool (navH)",
      };
      return [navHorizontalSpec];
    } else if ("[ViewsFrontstage]NavigationWidget-vertical" === toolBarId) {
      const navVerticalSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "nav2-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "test action tool (navV)",
      };
      return [navVerticalSpec];
    }

    return [];
  }
}

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / tools / UiProviderTool.ts View on Github

const nestedActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        parentToolGroupId: "tool-formatting-setting",
        itemId: "nested-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "test action tool (nested)",
      };

      const groupSpec: GroupItemInsertSpec = {
        itemType: ToolbarItemType.GroupButton,
        itemId: "test-tool-group",
        badge: BadgeType.TechnicalPreview,
        icon: "icon-developer",
        label: "test group",
        items: [childActionSpec, simpleActionSpec],
      };

      return [simpleActionSpec, nestedActionSpec, groupSpec];

    } else if ("[ViewsFrontstage]NavigationWidget-horizontal" === toolBarId) {
      const navHorizontalSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "nav1-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / tools / UiProviderTool.ts View on Github

};

      const nestedActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        parentToolGroupId: "tool-formatting-setting",
        itemId: "nested-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "test action tool (nested)",
      };

      const groupSpec: GroupItemInsertSpec = {
        itemType: ToolbarItemType.GroupButton,
        itemId: "test-tool-group",
        badge: BadgeType.TechnicalPreview,
        icon: "icon-developer",
        label: "test group",
        items: [childActionSpec, simpleActionSpec],
      };

      return [simpleActionSpec, nestedActionSpec, groupSpec];

    } else if ("[ViewsFrontstage]NavigationWidget-horizontal" === toolBarId) {
      const navHorizontalSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "nav1-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / tools / UiProviderTool.ts View on Github

const simpleActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "simple-test-action-tool",
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "simple-test-action-tool",
      };

      const childActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        itemId: "child-test-action-tool",
        condition: {
          type: ConditionalDisplayType.Visibility,
          testFunc: (): boolean => SampleAppIModelApp.getTestProperty() !== "HIDE",
          syncEventIds: [SampleAppUiActionId.setTestProperty],
        },
        execute: (): void => {
          // tslint:disable-next-line: no-console
          console.log("Got Here!");
        },
        icon: "icon-developer",
        label: "child-test-action-tool",
      };

      const nestedActionSpec: ActionItemInsertSpec = {
        itemType: ToolbarItemType.ActionButton,
        parentToolGroupId: "tool-formatting-setting",
        itemId: "nested-test-action-tool",
        execute: (): void => {

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / appui / frontstages / ViewsFrontstage.tsx View on Github

iconSpec: "icon-placeholder", labelKey: "SampleApp:buttons.startCursorPopup", execute: async () =&gt; {
        // const relativePosition = CursorInformation.getRelativePositionFromCursorDirection(CursorInformation.cursorDirection);
        const content = (
          
            {FrontstageManager.activeToolSettingsNode}
          
        );
        // CursorPopupManager.open("test1", content, CursorInformation.cursorPosition, new Point(20, 20), RelativePosition.TopRight, 10);
        CursorPopupManager.open("test1", content, CursorInformation.cursorPosition, new Point(20, 20), RelativePosition.TopRight, 10);
        CursorInformation.onCursorUpdatedEvent.addListener(this._handleCursorUpdated);
        document.addEventListener("keyup", this._handleCursorPopupKeypress);
      },
    });

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / appui / frontstages / ViewsFrontstage.tsx View on Github

let changed = false;

    switch (event.keyCode) {
      case 37:
        details.briefMessage = "Left pressed";
        this._toolRelativePosition = RelativePosition.Left;
        changed = true;
        break;
      case 38:
        details.briefMessage = "Up pressed";
        this._toolRelativePosition = RelativePosition.Top;
        changed = true;
        break;
      case 39:
        details.briefMessage = "Right pressed";
        this._toolRelativePosition = RelativePosition.Right;
        changed = true;
        break;
      case 40:
        details.briefMessage = "Down pressed";
        this._toolRelativePosition = RelativePosition.Bottom;
        changed = true;
        break;
      case 27:  // Escape
        this._handleTool4Dismiss();
        break;
    }

    if (changed) {
      IModelApp.notifications.outputMessage(details);
      IModelApp.notifications.updatePointerMessage({ x: CursorInformation.cursorX, y: CursorInformation.cursorY }, this._toolRelativePosition);
    }

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / appui / frontstages / ViewsFrontstage.tsx View on Github

this._toolRelativePosition = RelativePosition.Left;
        changed = true;
        break;
      case 38:
        details.briefMessage = "Up pressed";
        this._toolRelativePosition = RelativePosition.Top;
        changed = true;
        break;
      case 39:
        details.briefMessage = "Right pressed";
        this._toolRelativePosition = RelativePosition.Right;
        changed = true;
        break;
      case 40:
        details.briefMessage = "Down pressed";
        this._toolRelativePosition = RelativePosition.Bottom;
        changed = true;
        break;
      case 27:  // Escape
        this._handleTool4Dismiss();
        break;
    }

    if (changed) {
      IModelApp.notifications.outputMessage(details);
      IModelApp.notifications.updatePointerMessage({ x: CursorInformation.cursorX, y: CursorInformation.cursorY }, this._toolRelativePosition);
    }
  }

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / appui / frontstages / ViewsFrontstage.tsx View on Github

private _handleTool4Keypress = (event: any) => {
    const details = new NotifyMessageDetails(OutputMessagePriority.Info, "", this._tool4Detailed);
    let changed = false;

    switch (event.keyCode) {
      case 37:
        details.briefMessage = "Left pressed";
        this._toolRelativePosition = RelativePosition.Left;
        changed = true;
        break;
      case 38:
        details.briefMessage = "Up pressed";
        this._toolRelativePosition = RelativePosition.Top;
        changed = true;
        break;
      case 39:
        details.briefMessage = "Right pressed";
        this._toolRelativePosition = RelativePosition.Right;
        changed = true;
        break;
      case 40:
        details.briefMessage = "Down pressed";
        this._toolRelativePosition = RelativePosition.Bottom;
        changed = true;
        break;
      case 27:  // Escape
        this._handleTool4Dismiss();
        break;
    }

imodeljs / imodeljs / test-apps / ui-test-app / src / frontend / appui / frontstages / ViewsFrontstage.tsx View on Github

),
    });
  }

  // cSpell:enable

  public additionalHorizontalToolbarItems = new ItemList([
    this._openNestedAnimationStage,
    CoreTools.keyinBrowserButtonItemDef,
    AppTools.tool1,
    new ConditionalItemDef({
      conditionalId: "Conditional-tool-2",
      items: [AppTools.tool2, this._viewportPopupButtonItemDef],
      stateSyncIds: [SampleAppUiActionId.setTestProperty],
      stateFunc: this._enabledTestStateFunc,
      badgeType: BadgeType.New,
    }),
    AppTools.toolWithSettings,
    AppTools.toggleHideShowItemsCommand,
    new ConditionalItemDef({
      conditionalId: "Conditional-formatting",
      items: [
        new GroupItemDef({
          groupId: "tool-formatting-setting",
          labelKey: "SampleApp:buttons.toolGroup",
          iconSpec: "icon-placeholder",
          items: [AppTools.setLengthFormatMetricCommand, AppTools.setLengthFormatImperialCommand, AppTools.toggleLengthFormatCommand, CoreTools.clearSelectionItemDef],
          itemsInColumn: 4,
        }),
      ],
      stateSyncIds: [SampleAppUiActionId.setTestProperty],
      stateFunc: this._visibleTestStateFunc,

How to use @bentley/ui-abstract - 10 common examples

To help you get started, we’ve selected a few @bentley/ui-abstract examples, based on popular ways it is used in public projects.

@bentley/ui-abstract

Package Health Score

Popular @bentley/ui-abstract functions

Similar packages