docs: Added minimap example

projects/f-examples/extensions/minimap-example/minimap-example.component.html

@@ -0,0 +1,9 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+    <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating"></f-connection>
+    <div fNode [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fDragHandle>I'm a node</div>
+    <div fNode [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fDragHandle>I'm a node</div>
+  </f-canvas>
+  <f-minimap [fMinSize]="2000"></f-minimap>
+</f-flow>
+

projects/f-examples/extensions/minimap-example/minimap-example.component.scss

@@ -0,0 +1,10 @@
+@use "../../flow-common";
+
+::ng-deep minimap-example {
+  @include flow-common.connection;
+  @include flow-common.minimap;
+}
+
+.f-node {
+  @include flow-common.node;
+}

projects/f-examples/extensions/minimap-example/minimap-example.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'minimap-example',
+  styleUrls: [ './minimap-example.component.scss' ],
+  templateUrl: './minimap-example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class MinimapExampleComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+  }
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}