Minimap Overview

Moving the viewport
Zooming
Customization

The Minimap control is a custom control designed to provide a synchronized and miniature view of items in a NodifyEditor. It inherits from ItemsControl and displays items through the ItemsSource property. Each item is wrapped in a MinimapItem container that requires the Location, Width, and Height properties to be set in the ItemContainerStyle.

[!TIP] For real-time movement of nodes inside the minimap, it’s required to set NodifyEditor.EnableDraggingContainersOptimizations to false.

The control also displays a viewport rectangle that represents the visible area in the editor and requires the ViewportLocation and ViewportSize properties to be set.

<nodify:Minimap
    ItemsSource="{Binding ItemsSource, ElementName=Editor}"
    ViewportLocation="{Binding ViewportLocation, ElementName=Editor}"
    ViewportSize="{Binding ViewportSize, ElementName=Editor}"
    Zoom="OnMinimapZoom">
    <nodify:Minimap.ItemContainerStyle>
        <Style TargetType="nodify:MinimapItem">
            <Setter Property="Location" Value="{Binding MyItemLocation}" />
        </Style>
    </nodify:Minimap.ItemContainerStyle>
</nodify:Minimap>

private void OnMinimapZoom(object sender, ZoomEventArgs e)
{
    Editor.ZoomAtPosition(e.Zoom, e.Location);
}

[!IMPORTANT] The Width and Height should be constrained by the parent container or set to constant values on the Minimap to prevent resizing to fit the content.

Panning

Panning is done by holding click and dragging and can be disabled by setting the IsReadOnly property to true. The ViewportLocation is updated during panning, therefore it must be a two-way binding (binds two ways by default).

The panning gesture can be configured by setting EditorGestures.Mappings.Minimap.DragViewport to the desired gesture.

Zooming

Zooming is done by scrolling the mouse wheel and can be disabled by setting the IsReadOnly property to true or by not handling the Zoom event.

The zooming modifier key can be configured by setting EditorGestures.Mappings.Minimap.ZoomModifierKey to the desired value.

Customization

The ViewportStyle is used to customize the viewport rectangle.

<Style x:Key="MyViewportStyle" TargetType="Rectangle">
    <Setter Property="Fill" Value="Transparent"/>
    <Setter Property="Stroke" Value="White"/>
    <Setter Property="StrokeThickness" Value="3"/>
</Style>

<nodify:Minimap ViewportStyle="{StaticResource MyViewportStyle}" ... />

The MaxViewportOffset property is used to restrict how far the viewport can be moved away from the items when panning.

The ResizeToViewport property changes the resizing behavior of the minimap. If true, the minimap will resize to always display the viewport alongside the items.

scale-with-viewport

If false, the minimap will resize to only include the items, allowing the viewport to go out of bounds.

viewport-out-of-bounds

Minimap Overview

Table of contents

Panning

Zooming

Customization