CanDoItAll.Components.CanvasLib 0.1.15

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package CanDoItAll.Components.CanvasLib --version 0.1.15
                    


                    

                
NuGet\Install-Package CanDoItAll.Components.CanvasLib -Version 0.1.15
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="CanDoItAll.Components.CanvasLib" Version="0.1.15" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="CanDoItAll.Components.CanvasLib" Version="0.1.15" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="CanDoItAll.Components.CanvasLib" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add CanDoItAll.Components.CanvasLib --version 0.1.15
                    


                    

                
#r "nuget: CanDoItAll.Components.CanvasLib, 0.1.15"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package CanDoItAll.Components.CanvasLib@0.1.15
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=CanDoItAll.Components.CanvasLib&version=0.1.15
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=CanDoItAll.Components.CanvasLib&version=0.1.15
                    


                            Install as a Cake Tool

CanDoItAll.Components.CanvasLib

CanvasLib is a small framework for building stateful, interactive workspace surfaces in Blazor. Use it when a normal document-style page is no longer enough: your users need to pan and zoom a node graph, inspect context without losing their place, compose work on a stage, or work through a rich calendar.

It is deliberately more than a collection of isolated controls. The library provides the contracts, workbench host, browser runtime, accessibility mirror, interaction callbacks, canvas-specific overlays, and host asset order that let an application own the business state while CanvasLib owns the interaction mechanics.

CanvasLib layered model

Is CanvasLib the right fit?

Use CanvasLib for an authoring workspace, graph, process map, planning board, visual inspector, or dense calendar where state and interaction belong together. Use BaseLib for standard forms, pages, and cards. Use OverlayLib directly when a floating tool belongs to a normal page rather than a canvas. CanvasLib already depends on and composes both libraries where appropriate.

Core concepts

Concept Your application owns CanvasLib owns
CanvasWorkbenchSurface Nodes, links, mode, chrome, and the current CanvasWorkbenchUiState. Rendering a workbench from that typed surface.
CanvasWorkbench Handling selection, movement, context actions, editing, clipboard, and persistence callbacks. Canvas lifecycle, pan/zoom interaction, toolbar, accessibility mirror, and runtime interop.
CanDoItAll.canvasRuntime Scene models, layout, hit-region metadata, gesture meaning, and persistence. DPR-aware canvas sizing, render invalidation, pointer capture, hit testing, and PNG mechanics for reusable canvas components.
CanvasFloatingWindow CanvasWorkbenchWindowState and the inspector's content. A canvas-bounded, draggable, resizable window backed by OverlayLib.
CanvasCalendar Events, commands, and save/export/search callbacks. Interactive calendar surface and its browser-side behavior.

The boundary is intentional: do not place business rules in JavaScript, and do not rebuild the workbench shell in every consuming page.

Add CanvasLib to a host

Reference the package and add the namespace to _Imports.razor or the consuming component:

@using CanDoItAll.Components.CanvasLib

Add generated assets once in the host document. The Canvas asset components include OverlayLib in the required order; do not add hand-maintained copies of their runtime scripts.

@* App.razor *@
<head>
    ...
    <CanvasLibHeadAssets />
</head>
<body>
    ...
<CanvasLibBodyAssets IncludeRuntimeAssets="true"
                         IncludePreviewAssets="false"
                         IncludeCalendarAssets="true" />
</body>

IncludeRuntimeAssets="true" also loads the additive window.CanDoItAll.canvasRuntime API for reusable canvas components. It does not replace or alter the retained Workbench or Calendar runtimes. See the runtime asset guide for its factories and callback contract.

If a reusable component needs only the low-level canvas surface, pointer router, hit regions, and PNG renderer, load <CanvasRuntimeBodyAssets /> instead. That narrow wrapper does not load Workbench or Overlay assets.

Minimal workbench

Create a CanvasWorkbenchSurface in application code, render it, and react to the typed events. Keep the surface in your page, feature state store, or domain layer so it can be saved and restored like any other application state.

<CanvasWorkbench Surface="@surface"
                 SelectionChanged="HandleSelectionChanged"
                 NodesMoved="HandleNodesMoved"
                 ContextActionRequested="HandleContextAction">
    <ToolbarLeftContent>
        <StatusBadge Text="Planning board" Tone="info" />
    </ToolbarLeftContent>
</CanvasWorkbench>

@code {
    private readonly CanvasWorkbenchSurface surface = new()
    {
        SurfaceId = "planning-board",
        Nodes = [ /* map application records to CanvasWorkbenchNode */ ],
        Links = [ /* map relationships to CanvasWorkbenchLink */ ],
        UiState = new CanvasWorkbenchUiState()
    };

    private Task HandleSelectionChanged(CanvasWorkbenchSelectionChangedEventArgs change)
        => Task.CompletedTask;

    private Task HandleNodesMoved(CanvasWorkbenchNodesMovedEventArgs change)
        => Task.CompletedTask;

    private Task HandleContextAction(CanvasWorkbenchContextActionRequest request)
        => Task.CompletedTask;
}

Floating inspector in a canvas

Render a CanvasFloatingWindow inside OverlayContent, and keep its state with the workbench UI state when you need persistence. The wrapper adapts CanvasWorkbenchWindowState to OverlayLib's generic window runtime; it does not create a competing window lifecycle.

<CanvasWorkbench Surface="@surface">
    <OverlayContent>
        @if (inspector.IsVisible)
        {
            <CanvasFloatingWindow WindowId="selection-inspector"
                                  Title="Selection"
                                  Kicker="Inspector"
                                  Summary="Context for the selected node."
                                  State="@inspector"
                                  StateChanged="HandleInspectorChanged">
                <TextBlock TextStyle="TextStyle.Body2"
                           Value="Inspector content stays near the canvas." />
            </CanvasFloatingWindow>
        }
    </OverlayContent>
</CanvasWorkbench>

@code {
    private CanvasWorkbenchWindowState inspector = new();

    private Task HandleInspectorChanged(CanvasWorkbenchWindowState next)
    {
        inspector = CanvasWorkbenchWindowState.Normalize(next);
        return Task.CompletedTask;
    }
}

Use the WindowStates dictionary on CanvasWorkbenchUiState when several windows should survive a route change or a saved workspace. Give each window a stable WindowId and dictionary key.

Canvas floating inspector over the workbench stage

What to validate

The Sandbox Canvas route demonstrates the real workbench, the selected-node inspector, and overlapping windows. Validate selection, drag/pan, keyboard interactions, geometry persistence, minimize/hide/show behavior, and an accessible representation of the important canvas content, not only how the stage first renders.

Development and package checks

CanvasLib targets net10.0 and has no npm runtime dependency. Node tooling is used only to generate or verify assets, style components, and run browser proof.

npm run canvaslib:verify-assets
dotnet build src/CanDoItAll.Components.CanvasLib/CanDoItAll.Components.CanvasLib.csproj --no-restore
dotnet test tests/CanDoItAll.Components.BaseLib.Tests/CanDoItAll.Components.BaseLib.Tests.csproj --filter FullyQualifiedName~CanvasOverlayPublishingApprovalTests --no-restore

For the static-runtime asset map and ownership notes, see Canvas/README.md. For the repository overview, see the main README.

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on CanDoItAll.Components.CanvasLib:

Package Downloads
CanDoItAll.Components.Gantt

Reusable controlled Gantt contracts and scheduling for Blazor canvas surfaces.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.1.15 65 7/24/2026