[AF-250] Introduce minimap component

apps/angular-demo/src/app/app.component.html

@@ -18,6 +18,7 @@
   >
     <ng-diagram-background type="grid"></ng-diagram-background>
   </ng-diagram>
+  <ng-diagram-minimap [nodeStyle]="nodeStyle" [minimapNodeTemplateMap]="minimapNodeTemplateMap" />
   <app-toolbar (reinitializeModelClick)="onReinitializeModel()" />
   <app-palette [model]="paletteModel" />
 </div>

apps/angular-demo/src/app/app.component.ts

@@ -6,10 +6,13 @@ import {
   EdgeDrawnEvent,
   GroupMembershipChangedEvent,
   initializeModel,
+  MinimapNodeStyle,
   NgDiagramBackgroundComponent,
   NgDiagramComponent,
   NgDiagramConfig,
   NgDiagramEdgeTemplateMap,
+  NgDiagramMinimapComponent,
+  NgDiagramMinimapNodeTemplateMap,
   NgDiagramNodeTemplateMap,
   NgDiagramPaletteItem,
   NodeResizedEvent,
@@ -32,14 +35,21 @@ import { ButtonEdgeComponent } from './edge-template/button-edge/button-edge.com
 import { CustomPolylineEdgeComponent } from './edge-template/custom-polyline-edge/custom-polyline-edge.component';
 import { DashedEdgeComponent } from './edge-template/dashed-edge/dashed-edge.component';
 import { LabelledEdgeComponent } from './edge-template/labelled-edge/labelled-edge.component';
+import { ImageMinimapNodeComponent } from './minimap-node-template/image-minimap-node/image-minimap-node.component';
 import { PaletteComponent } from './palette/palette.component';
 import { ToolbarComponent } from './toolbar/toolbar.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  imports: [ToolbarComponent, PaletteComponent, NgDiagramComponent, NgDiagramBackgroundComponent],
+  imports: [
+    ToolbarComponent,
+    PaletteComponent,
+    NgDiagramComponent,
+    NgDiagramBackgroundComponent,
+    NgDiagramMinimapComponent,
+  ],
   providers: [provideNgDiagram()],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -55,6 +65,8 @@ export class AppComponent {
     ['dashed-edge', DashedEdgeComponent],
   ]);
 
+  minimapNodeTemplateMap = new NgDiagramMinimapNodeTemplateMap([['image', ImageMinimapNodeComponent]]);
+
   config = {
     zoom: {
       max: 2,
@@ -205,4 +217,19 @@ export class AppComponent {
   }
 
   model = initializeModel(defaultModel);
+
+  nodeStyle(node: Node): MinimapNodeStyle {
+    const style: MinimapNodeStyle = {};
+
+    if (node.id == '13') {
+      style.shape = 'circle';
+    }
+
+    if (node.selected) {
+      style.stroke = 'var(--ngd-node-stroke-primary-hover)';
+      style.strokeWidth = 5;
+    }
+
+    return style;
+  }
 }

apps/angular-demo/src/app/minimap-node-template/image-minimap-node/image-minimap-node.component.scss

@@ -0,0 +1,10 @@
+:host {
+  display: contents;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}

apps/angular-demo/src/app/minimap-node-template/image-minimap-node/image-minimap-node.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { MinimapNodeStyle, NgDiagramMinimapNodeTemplate, type Node } from 'ng-diagram';
+
+@Component({
+  selector: 'app-image-minimap-node',
+  standalone: true,
+  template: `<img [src]="imageUrl()" alt="image" />`,
+  styleUrl: './image-minimap-node.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ImageMinimapNodeComponent implements NgDiagramMinimapNodeTemplate {
+  node = input.required<Node>();
+  nodeStyle = input<MinimapNodeStyle>();
+
+  imageUrl = computed(() => {
+    const data = this.node().data as { imageUrl?: string } | undefined;
+    return data?.imageUrl ?? 'https://placehold.jp/150x150.png';
+  });
+}

apps/docs/src/content/docs/api/Components/NgDiagramMinimapComponent.md

@@ -0,0 +1,84 @@
+---
+version: "since v1.0.0"
+editUrl: false
+next: false
+prev: false
+title: "NgDiagramMinimapComponent"
+---
+
+A minimap component that displays a bird's-eye view of the diagram.
+
+Shows all nodes as small rectangles and a viewport rectangle indicating
+the currently visible area. The minimap updates reactively when the
+diagram viewport changes (pan/zoom) or when nodes are added/removed/updated.
+
+The minimap also supports navigation: click and drag on the minimap to pan
+the diagram viewport to different areas.
+
+## Implements
+
+- `AfterViewInit`
+- `OnDestroy`
+
+## Properties
+
+### height
+
+> **height**: `InputSignal`\<`number`\>
+
+Height of the minimap in pixels.
+
+***
+
+### minimapNodeTemplateMap
+
+> **minimapNodeTemplateMap**: `InputSignal`\<[`NgDiagramMinimapNodeTemplateMap`](/docs/api/types/minimap/ngdiagramminimapnodetemplatemap/)\>
+
+Optional template map for complete control over node rendering per node type.
+Components registered in the map should render SVG elements.
+
+#### Example
+
+```typescript
+const minimapTemplateMap = new NgDiagramMinimapNodeTemplateMap([
+  ['database', DatabaseMinimapNodeComponent],
+  ['api', ApiMinimapNodeComponent],
+]);
+
+// Usage:
+<ng-diagram-minimap [minimapNodeTemplateMap]="minimapTemplateMap" />
+```
+
+***
+
+### nodeStyle
+
+> **nodeStyle**: `InputSignal`\<`undefined` \| [`MinimapNodeStyleFn`](/docs/api/types/minimap/minimapnodestylefn/)\>
+
+Optional callback function to customize node styling.
+Return style properties to override defaults, or null/undefined to use CSS defaults.
+
+#### Example
+
+```typescript
+nodeStyle = (node: Node) => ({
+  fill: node.type === 'database' ? '#4CAF50' : '#9E9E9E',
+  opacity: node.selected ? 1 : 0.6,
+});
+```
+
+***
+
+### position
+
+> **position**: `InputSignal`\<[`NgDiagramPanelPosition`](/docs/api/types/ngdiagrampanelposition/)\>
+
+Position of the minimap panel within the diagram container.
+
+***
+
+### width
+
+> **width**: `InputSignal`\<`number`\>
+
+Width of the minimap in pixels.

apps/docs/src/content/docs/api/Directives/NgDiagramMinimapNavigationDirective.md

@@ -0,0 +1,31 @@
+---
+version: "since v1.0.0"
+editUrl: false
+next: false
+prev: false
+title: "NgDiagramMinimapNavigationDirective"
+---
+
+Directive that enables drag navigation on the minimap.
+Users can drag on the minimap to move the diagram viewport.
+
+## Implements
+
+- `OnDestroy`
+
+## Methods
+
+### ngOnDestroy()
+
+> **ngOnDestroy**(): `void`
+
+A callback method that performs custom clean-up, invoked immediately
+before a directive, pipe, or service instance is destroyed.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+`OnDestroy.ngOnDestroy`

apps/docs/src/content/docs/api/Types/Minimap/MinimapNodeShape.md

@@ -0,0 +1,11 @@
+---
+version: "since v1.0.0"
+editUrl: false
+next: false
+prev: false
+title: "MinimapNodeShape"
+---
+
+> **MinimapNodeShape** = `"rect"` \| `"circle"` \| `"ellipse"`
+
+Available shapes for minimap node rendering.

apps/docs/src/content/docs/api/Types/Minimap/MinimapNodeStyle.md

@@ -0,0 +1,58 @@
+---
+version: "since v1.0.0"
+editUrl: false
+next: false
+prev: false
+title: "MinimapNodeStyle"
+---
+
+Style properties that can be applied to minimap nodes.
+All properties are optional - unset properties use CSS defaults.
+
+## Properties
+
+### cssClass?
+
+> `optional` **cssClass**: `string`
+
+CSS class to apply to the node
+
+***
+
+### fill?
+
+> `optional` **fill**: `string`
+
+Fill color for the node
+
+***
+
+### opacity?
+
+> `optional` **opacity**: `number`
+
+Opacity from 0 to 1
+
+***
+
+### shape?
+
+> `optional` **shape**: [`MinimapNodeShape`](/docs/api/types/minimap/minimapnodeshape/)
+
+Shape of the node in the minimap. Defaults to 'rect'.
+
+***
+
+### stroke?
+
+> `optional` **stroke**: `string`
+
+Stroke color for the node
+
+***
+
+### strokeWidth?
+
+> `optional` **strokeWidth**: `number`
+
+Stroke width in pixels

apps/docs/src/content/docs/api/Types/Minimap/MinimapNodeStyleFn.md

@@ -0,0 +1,31 @@
+---
+version: "since v1.0.0"
+editUrl: false
+next: false
+prev: false
+title: "MinimapNodeStyleFn"
+---
+
+> **MinimapNodeStyleFn** = (`node`) => [`MinimapNodeStyle`](/docs/api/types/minimap/minimapnodestyle/) \| `null` \| `undefined`
+
+Function signature for the nodeStyle callback.
+Return style properties to override defaults, or null/undefined to use defaults.
+
+## Parameters
+
+### node
+
+[`Node`](/docs/api/types/model/node/)
+
+## Returns
+
+[`MinimapNodeStyle`](/docs/api/types/minimap/minimapnodestyle/) \| `null` \| `undefined`
+
+## Example
+
+```typescript
+const nodeStyle: MinimapNodeStyleFn = (node) => ({
+  fill: node.type === 'database' ? '#4CAF50' : '#9E9E9E',
+  opacity: node.selected ? 1 : 0.6,
+});
+```

apps/docs/src/content/docs/api/Types/Minimap/NgDiagramMinimapNodeTemplate.md

@@ -0,0 +1,49 @@
+---
+version: "since v1.0.0"
+editUrl: false
+next: false
+prev: false
+title: "NgDiagramMinimapNodeTemplate"
+---
+
+Interface for custom minimap node components.
+Components implementing this interface can be registered in NgDiagramMinimapNodeTemplateMap
+to customize how specific node types are rendered in the minimap.
+
+Custom templates are rendered inside a foreignObject that handles positioning and sizing,
+so the component only needs to render content that fills its container.
+
+## Example
+
+```typescript
+@Component({
+  selector: 'my-minimap-node',
+  standalone: true,
+  template: `
+    <div class="minimap-icon" [style.background]="node().data?.color">
+      {{ node().type }}
+    </div>
+  `,
+  styles: [`.minimap-icon { width: 100%; height: 100%; }`]
+})
+export class MyMinimapNodeComponent implements NgDiagramMinimapNodeTemplate {
+  node = input.required<Node>();
+  nodeStyle = input<MinimapNodeStyle>(); // Required by interface, can be ignored if not needed
+}
+```
+
+## Properties
+
+### node
+
+> **node**: `InputSignal`\<[`Node`](/docs/api/types/model/node/)\>
+
+Input signal containing the original Node object for accessing node data, type, etc.
+
+***
+
+### nodeStyle
+
+> **nodeStyle**: `InputSignal`\<`undefined` \| [`MinimapNodeStyle`](/docs/api/types/minimap/minimapnodestyle/)\>
+
+Input signal for style overrides computed by nodeStyle callback. Can be ignored if not needed.