From e3e18d67405468daaa4fc24e5f487f678d985ea6 Mon Sep 17 00:00:00 2001
From: miroiu <miroiu.emanuel@gmail.com>
Date: Tue, 23 Jul 2024 20:25:51 +0300
Subject: [PATCH] Add minimap documentation

---
 .../Editor/NodifyEditorView.xaml              |  4 +-
 Examples/Nodify.Shapes/Canvas/CanvasView.xaml |  2 +-
 docs/Connections-Overview.md                  | 20 +++--
 docs/Minimap-Overview.md                      | 73 +++++++++++++++++++
 docs/_Sidebar.md                              | 27 ++++++-
 5 files changed, 114 insertions(+), 12 deletions(-)
 create mode 100644 docs/Minimap-Overview.md

diff --git a/Examples/Nodify.Playground/Editor/NodifyEditorView.xaml b/Examples/Nodify.Playground/Editor/NodifyEditorView.xaml
index 3cd96f7b..5873f9f4 100644
--- a/Examples/Nodify.Playground/Editor/NodifyEditorView.xaml
+++ b/Examples/Nodify.Playground/Editor/NodifyEditorView.xaml
@@ -472,8 +472,8 @@
         <Grid Background="{StaticResource LargeGridLinesDrawingBrush}"
               Visibility="{Binding ShowGridLines, Source={x:Static local:PlaygroundSettings.Instance}, Converter={shared:BooleanToVisibilityConverter}}"
               Panel.ZIndex="-2" />
-        
-        <nodify:Minimap ItemsSource="{Binding Nodes}"
+
+        <nodify:Minimap ItemsSource="{Binding ItemsSource, ElementName=Editor}"
                         ViewportSize="{Binding ViewportSize, ElementName=Editor}"
                         ViewportLocation="{Binding ViewportLocation, ElementName=Editor}"
                         Visibility="{Binding ShowMinimap, Source={x:Static local:PlaygroundSettings.Instance}, Converter={shared:BooleanToVisibilityConverter}}"
diff --git a/Examples/Nodify.Shapes/Canvas/CanvasView.xaml b/Examples/Nodify.Shapes/Canvas/CanvasView.xaml
index 9b30b905..21e75381 100644
--- a/Examples/Nodify.Shapes/Canvas/CanvasView.xaml
+++ b/Examples/Nodify.Shapes/Canvas/CanvasView.xaml
@@ -382,7 +382,7 @@
                     <DropShadowEffect ShadowDepth="1" />
                 </Border.Effect>
 
-                <nodify:Minimap ItemsSource="{Binding Shapes}"
+                <nodify:Minimap ItemsSource="{Binding ItemsSource, ElementName=Editor}"
                                 ViewportLocation="{Binding ViewportLocation, ElementName=Editor}"
                                 ViewportSize="{Binding ViewportSize, ElementName=Editor}"
                                 ResizeToViewport="True"
diff --git a/docs/Connections-Overview.md b/docs/Connections-Overview.md
index 05cd0169..acfb56d3 100644
--- a/docs/Connections-Overview.md
+++ b/docs/Connections-Overview.md
@@ -1,20 +1,30 @@
 Connections are created between two points. The `Source` and `Target` dependency properties are of type `Point` and are usually bound to a connector's `Anchor` point.
 
+## Table of contents
+
+- [Base connection](#base-connection)
+- [Line connection](#line-connection)
+- [Circuit connection](#circuit-connection)
+- [Bezier connection](#connection)
+- [Step connection](#step-connection)
+- [Pending connection](#pending-connection)
+
 ## Base connection
 
-The base class for all connections provided by the library is `BaseConnection` which derives from `Shape`. There's no restriction to derive from `BaseConnection` when you create a custom connection. 
+The base class for all connections provided by the library is `BaseConnection` which derives from `Shape`. There's no restriction to derive from `BaseConnection` when you create a custom connection.
 
 It exposes two commands with their corresponding events:
- - `DisconnectCommand`, respectively `DisconnectEvent` - fired when the connection is clicked while holding `ALT`
- - `SplitCommand`, respectively `SplitEvent` - fired when the connection is double-clicked
+
+- `DisconnectCommand`, respectively `DisconnectEvent` - fired when the connection is clicked while holding `ALT`
+- `SplitCommand`, respectively `SplitEvent` - fired when the connection is double-clicked
 
 The `Direction` of a connection can have two values:
- - `Forward`
+
+- `Forward`
 
 ![image](https://user-images.githubusercontent.com/12727904/192101918-af9b0da6-ecc8-48f7-bf4d-8f9fdd005153.png)
 ![image](https://user-images.githubusercontent.com/12727904/192101959-2cb9a837-1642-4e96-b2ef-eea5502a587f.png)
 
-
 - `Backward`
 
 ![image](https://user-images.githubusercontent.com/12727904/192101941-a00e23db-07ae-49ac-a907-72e35ef67877.png)
diff --git a/docs/Minimap-Overview.md b/docs/Minimap-Overview.md
new file mode 100644
index 00000000..72d4b432
--- /dev/null
+++ b/docs/Minimap-Overview.md
@@ -0,0 +1,73 @@
+## Table of contents
+
+- [Moving the viewport](#panning)
+- [Zooming](#zooming)
+- [Customization](#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.
+
+```xml
+<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>
+```
+
+```csharp
+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.
+
+```xml
+<Style x:Key="MyViewportStyle" TargetType="Rectangle">
+    <Setter Property="Fill" Value="Transparent"/>
+    <Setter Property="Stroke" Value="White"/>
+    <Setter Property="StrokeThickness" Value="3"/>
+</Style>
+
+<local:Minimap ViewportStyle="{StaticResource MyViewportStyle}" ... />
+```
+
+The `MaxViewportOffset` property is used to restrict how far the viewport can be moved away from the items when [panning](#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](https://github.com/user-attachments/assets/7a8887bf-f3f4-44d7-8311-6d9ba7869d78)
+
+If `false`, the minimap will resize to only include the items, allowing the viewport to go out of bounds.
+
+![viewport-out-of-bounds](https://github.com/user-attachments/assets/5d3b388e-8e40-4bfe-af3b-4c12fb47548d)
diff --git a/docs/_Sidebar.md b/docs/_Sidebar.md
index 97f40903..f170fcbc 100644
--- a/docs/_Sidebar.md
+++ b/docs/_Sidebar.md
@@ -1,9 +1,12 @@
-| [English](https://github.com/WYihei/nodify/wiki/Home) | [简体中文](https://github.com/WYihei/nodify/wiki/主页)
-| --- | --- |
-***
+| [English](https://github.com/WYihei/nodify/wiki/Home) | [简体中文](https://github.com/WYihei/nodify/wiki/主页) |
+| ----------------------------------------------------- | ------------------------------------------------------ |
+
+---
+
 ## [Home](Home)
 
 [Getting Started](Getting-Started)
+
 - [Hierarchy and terminology](Getting-Started#hierarchy-and-terminology)
 - [Content layers](Getting-Started#content-layers)
 - [Creating an editor](Getting-Started#creating-an-editor)
@@ -12,6 +15,7 @@
 - [Drawing a grid](Getting-Started#drawing-a-grid)
 
 [Editor overview](Editor-Overview)
+
 - [Moving the viewport](Editor-Overview#panning)
 - [Zooming](Editor-Overview#zooming)
 - [Selecting items](Editor-Overview#selecting)
@@ -19,21 +23,36 @@
 - [Commands](Editor-Overview#commands)
 
 [ItemContainer overview](ItemContainer-Overview)
+
 - [Selecting](ItemContainer-Overview#selecting)
 - [Moving](ItemContainer-Overview#moving-and-dragging)
 
 [Nodes overview](Nodes-Overview)
+
 - [The node](Nodes-Overview#1-the-node-control)
 - [The grouping node](Nodes-Overview#2-the-groupingnode-control)
 - [The knot node](Nodes-Overview#3-the-knotnode-control)
 - [The state node](Nodes-Overview#4-the-statenode-control)
 
 [Connections overview](Connections-Overview)
+
 - [Base connection](Connections-Overview#base-connection)
+- [Bezier connection](Connections-Overview#connection)
+- [Line connection](Connections-Overview#line-connection)
+- [Circuit connection](Connections-Overview#circuit-connection)
+- [Step connection](Connections-Overview#step-connection)
 - [Pending connection](Connections-Overview#pending-connection)
 
 [Connectors overview](Connectors-Overview)
 
+- [NodeInput and NodeOutput](Connectors-Overview#nodeinput-and-nodeoutput)
+
+[Minimap overview](Minimap-Overview)
+
+- [Moving the viewport](Minimap-Overview#panning)
+- [Zooming](Minimap-Overview#zooming)
+- [Customization](Minimap-Overview#customization)
+
 [API Reference](API-Reference)
 
-[(FAQ) Frequently asked questions](FAQ)
\ No newline at end of file
+[(FAQ) Frequently asked questions](FAQ)