Editor package guide

Install C4.Net.Editor to embed interactive workspace layout editing in a Blazor application.

dotnet add package C4.Net.Editor

C4.Net.Editor depends on the renderer package and expects a Workspace instance from the core package.

Namespace

@using C4.Net.Editor

Add static assets

Reference the packaged stylesheet and script from the host page.

<link rel="stylesheet" href="_content/C4.Net.Editor/c4-net-editor.css" />
<script src="_content/C4.Net.Editor/c4-net-editor.js"></script>

Enable an interactive render mode

The editor components use Blazor interop for dragging elements and editing connector vertices, so the host page must render them with an interactive Blazor render mode.

Use WorkspaceEditor

WorkspaceEditor renders a thumbnail navigator plus the selected interactive view.

<WorkspaceEditor Workspace="workspace"
                 InitialViewKey="system-context"
                 @bind-SelectedViewKey="selectedViewKey"
                 LayoutChanged="OnLayoutChanged"
                 SaveRequested="SaveWorkspace" />

Use ViewEditor

Use ViewEditor when the host already controls navigation and only needs a single editable view surface.

To move multiple components together, select additional elements with Ctrl/Cmd/Shift, then drag one of the selected elements. You can also left-click and drag on empty diagram space to draw a selection box and include items as they enter the box. Dragged elements and relationship label text snap to other diagram items when their horizontal or vertical positions come within 5 pixels. Relationship line nodes only snap to other line nodes. Hold Shift while dragging to temporarily disable snapping.

Persistence responsibilities

Dragging updates ElementView.X and ElementView.Y. Connector edits update the underlying RelationshipView. LayoutChanged reports in-memory changes immediately, and SaveRequested lets the host decide how to persist the updated workspace.

See C4.Net.Renderer.Web/Components/Pages/Editor.razor for a complete host example.