[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/components/angular/minimap/diagram.component.html

@@ -0,0 +1,6 @@
+<div class="not-content diagram">
+  <ng-diagram [model]="model" [config]="config">
+    <ng-diagram-background />
+  </ng-diagram>
+  <ng-diagram-minimap />
+</div>

apps/docs/src/components/angular/minimap/diagram.component.scss

@@ -0,0 +1,12 @@
+:host {
+  position: relative;
+  display: flex;
+}
+
+.diagram {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: var(--ng-diagram-height);
+  border: var(--ng-diagram-border);
+}

apps/docs/src/components/angular/minimap/diagram.component.ts

@@ -0,0 +1,60 @@
+import '@angular/compiler';
+
+import { Component } from '@angular/core';
+import {
+  initializeModel,
+  NgDiagramBackgroundComponent,
+  NgDiagramComponent,
+  NgDiagramMinimapComponent,
+  provideNgDiagram,
+  type NgDiagramConfig,
+} from 'ng-diagram';
+
+@Component({
+  imports: [
+    NgDiagramComponent,
+    NgDiagramBackgroundComponent,
+    NgDiagramMinimapComponent,
+  ],
+  providers: [provideNgDiagram()],
+  templateUrl: './diagram.component.html',
+  styleUrls: ['./diagram.component.scss'],
+})
+export class DiagramComponent {
+  config = {
+    zoom: {
+      zoomToFit: {
+        onInit: true,
+        padding: [50, 250, 50, 50],
+      },
+    },
+  } satisfies NgDiagramConfig;
+
+  model = initializeModel({
+    nodes: [
+      { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
+      { id: '2', position: { x: 300, y: 0 }, data: { label: 'Node 2' } },
+      { id: '3', position: { x: 150, y: 150 }, data: { label: 'Node 3' } },
+      { id: '4', position: { x: 0, y: 300 }, data: { label: 'Node 4' } },
+      { id: '5', position: { x: 300, y: 300 }, data: { label: 'Node 5' } },
+    ],
+    edges: [
+      {
+        id: 'e1',
+        source: '1',
+        sourcePort: 'port-right',
+        target: '2',
+        targetPort: 'port-left',
+        data: {},
+      },
+      {
+        id: 'e2',
+        source: '4',
+        sourcePort: 'port-right',
+        target: '5',
+        targetPort: 'port-left',
+        data: {},
+      },
+    ],
+  });
+}

apps/docs/src/components/angular/minimap/minimap.astro

@@ -0,0 +1,5 @@
+---
+import { DiagramComponent } from './diagram.component';
+---
+
+<DiagramComponent client:only="angular" />

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

@@ -0,0 +1,91 @@
+---
+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`
+
+## 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.
+
+***
+
+### showZoomControls
+
+> **showZoomControls**: `InputSignal`\<`boolean`\>
+
+Whether to show zoom controls in the minimap footer.
+
+***
+
+### width
+
+> **width**: `InputSignal`\<`number`\>
+
+Width of the minimap in pixels.

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

@@ -0,0 +1,34 @@
+---
+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.
+
+Supports both mouse and touch input.
+Uses pointer capture for reliable touch tracking on mobile devices.
+
+## 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/Services/NgDiagramViewportService.md

@@ -25,6 +25,22 @@ this.viewportService.zoom(1.2);
 
 ## Properties
 
+### canZoomIn
+
+> **canZoomIn**: `Signal`\<`boolean`\>
+
+Returns true if the current zoom level is below the maximum and can be increased.
+
+***
+
+### canZoomOut
+
+> **canZoomOut**: `Signal`\<`boolean`\>
+
+Returns true if the current zoom level is above the minimum and can be decreased.
+
+***
+
 ### scale
 
 > **scale**: `Signal`\<`number`\>
@@ -39,6 +55,34 @@ Returns a computed signal for the scale that safely handles uninitialized state.
 
 Returns a computed signal for the viewport that safely handles uninitialized state.
 
+## Accessors
+
+### maxZoom
+
+#### Get Signature
+
+> **get** **maxZoom**(): `number`
+
+Returns the maximum zoom scale from the diagram configuration.
+
+##### Returns
+
+`number`
+
+***
+
+### minZoom
+
+#### Get Signature
+
+> **get** **minZoom**(): `number`
+
+Returns the minimum zoom scale from the diagram configuration.
+
+##### Returns
+
+`number`
+
 ## Methods
 
 ### centerOnNode()
@@ -222,7 +266,7 @@ Zooms the viewport by the specified factor.
 
 `number`
 
-The factor to zoom by.
+The factor to zoom by (e.g., 1.1 for 10% zoom in, 0.9 for 10% zoom out).
 
 ##### center?
 

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.