Xbim.WexBlazor 1.7.2

Xbim.WexBlazor

👁 NuGet
👁 License: MIT

A Blazor component library for building BIM (Building Information Modeling) applications. Wraps the @xbim/viewer JavaScript library for 3D model visualization in Blazor WebAssembly or Server applications.

Features

• 3D BIM Viewer - WebGL-based visualization of wexBIM models
• Plugin System - Navigation cube, grid, section box, clipping planes
• Sidebar Docking - Dockable/overlay panels with icon bar navigation
• Property Display - Multi-source property aggregation (IFC, database, custom)
• Model Hierarchy - Product types and spatial structure navigation
• Theming - Light/dark themes with customizable colors
• Direct IFC Loading - Server-side conversion (Blazor Server only)

Two Modes of Operation

This library supports two modes to fit different application needs:

Installation

# Add GitHub Packages source (one-time setup)
dotnet add package Xbim.WexBlazor

For platform mode, also install the API client:

dotnet add package Xbim.WexServer.Client

Quick Start

Standalone Mode

Register services for standalone operation (no server required):

// Program.cs
builder.Services.AddWexBlazorStandalone();

Add to _Imports.razor:

@using Xbim.WexBlazor
@using Xbim.WexBlazor.Components

Basic viewer:

<XbimViewer Id="viewer"
 Width="800"
 Height="600"
 ModelUrl="models/building.wexbim"
 OnModelLoaded="HandleModelLoaded" />

@code {
 private void HandleModelLoaded(bool success)
 {
 Console.WriteLine(success ? "Model loaded" : "Load failed");
 }
}

Platform Mode (With WexServer from WexSDK)

Register services with a WexServer connection:

// Program.cs
builder.Services.AddWexServerClient(options =>
{
 options.BaseUrl = "https://your-Xbim-server.com";
});
builder.Services.AddWexBlazorPlatform();

Platform mode enables:

• Model storage in cloud or on-premises
• Model versioning and history
• Property extraction stored in database
• User authentication and workspace management

Components

XbimViewer

The main viewer component with full model interaction support.

<XbimViewer Id="myViewer"
 Width="100%"
 Height="600"
 BackgroundColor="#F5F5F5"
 ModelUrl="models/SampleModel.wexbim"
 OnViewerInitialized="HandleInit"
 OnModelLoaded="HandleLoad"
 OnPick="HandlePick">
 
</XbimViewer>

Parameters:

• Id - Unique viewer identifier
• Width/Height - Dimensions (px or %)
• BackgroundColor - Canvas background
• ModelUrl - Initial model URL to load

Events:

• OnViewerInitialized - Viewer ready
• OnModelLoaded - Model load complete
• OnPick - Element selected
• OnHoverPick - Element hovered

ViewerToolbar

Built-in toolbar with common viewer operations.

<XbimViewer ...>
 <ViewerToolbar Position="ToolbarPosition.Top"
 ShowResetView="true"
 ShowZoomControls="true"
 ShowNavigationModes="true" />
</XbimViewer>

ViewerSidebar + SidebarPanel

Dockable sidebar system with icon-based panel management.

<XbimViewer ...>
 <ViewerSidebar Position="SidebarPosition.Right" DefaultMode="SidebarMode.Docked">
 <SidebarPanel Title="Properties" Icon="bi-info-circle">
 <PropertiesPanel ShowHeader="false" />
 </SidebarPanel>
 <SidebarPanel Title="Hierarchy" Icon="bi-diagram-3">
 <ModelHierarchyPanel ShowHeader="false" />
 </SidebarPanel>
 </ViewerSidebar>
</XbimViewer>

PropertiesPanel

Displays element properties when selected. Auto-subscribes to viewer pick events.

<PropertiesPanel ShowHeader="true" />

ModelHierarchyPanel

Shows model structure with Product Types and Spatial Structure tabs.

<ModelHierarchyPanel ShowHeader="true" />

FileLoaderPanel

UI for loading models from URLs, files, or demo assets.

<FileLoaderPanel AllowIfcFiles="true" OnFileLoaded="HandleFile" />

Plugins

Add viewer plugins for enhanced functionality:

<XbimViewer @ref="_viewer" ...>
 <NavigationCubePlugin Opacity="0.7" />
 <GridPlugin Spacing="1000" Color="#CCCCCC" />
 <SectionBoxPlugin />
 <ClippingPlanePlugin />
</XbimViewer>

Theming

Register and configure the theme service:

// Program.cs
var themeService = new ThemeService();
themeService.SetTheme(ViewerTheme.Dark);
themeService.SetAccentColors(lightColor: "#0969da", darkColor: "#4da3ff");
builder.Services.AddSingleton(themeService);

Toggle theme at runtime:

@inject ThemeService ThemeService

<button @onclick="() => ThemeService.ToggleTheme()">Toggle Theme</button>

Property Sources

The library supports multiple property sources for element data.

IFC Property Source (Blazor Server)

var model = IfcStore.Open("model.ifc");
var propertySource = new IfcPropertySource(model, viewerModelId);
propertyService.RegisterSource(propertySource);

Custom Property Source

var apiSource = new CustomPropertySource(
 async (query, ct) =>
 {
 var data = await api.GetPropertiesAsync(query.ElementId);
 return new ElementProperties { /* ... */ };
 },
 sourceType: "REST API",
 name: "API Properties"
);
propertyService.RegisterSource(apiSource);

Dictionary Property Source

var dictSource = new DictionaryPropertySource(name: "Custom");
dictSource.AddProperty(elementId: 123, modelId: 0,
 groupName: "Status", propertyName: "Approved", value: "Yes");
propertyService.RegisterSource(dictSource);

IFC Loading (Blazor Server Only)

Direct IFC file loading with automatic wexBIM conversion:

// Program.cs
builder.Services.AddSingleton<IfcModelService>();
builder.Services.AddSingleton<IfcHierarchyService>();

@inject IfcModelService IfcService

var result = await IfcService.ProcessIfcBytesAsync(ifcData, "model.ifc");
if (result.Success)
{
 await Viewer.LoadModelFromBytesAsync(result.WexbimData!, "model.ifc");
}

Requirements

• .NET 9.0+
• Node.js 20+ (for TypeScript compilation)
• Blazor WebAssembly or Blazor Server

License

MIT

Related Packages

• Xbim.WexServer.Client - API client for Xbim WexServer