docs: Added help in positioning example

projects/f-examples/extensions/help-in-positioning-example/help-in-positioning-example.component.html

@@ -0,0 +1,8 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-line-alignment [fAlignThreshold]="40"></f-line-alignment>
+  <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: 124 }" fNodeInput fInputId="input1" fDragHandle>I'm a node</div>
+  </f-canvas>
+</f-flow>

projects/f-examples/extensions/help-in-positioning-example/help-in-positioning-example.component.scss

@@ -0,0 +1,12 @@
+@use "../../flow-common";
+@use "../../mdc-controls";
+
+::ng-deep help-in-positioning-example {
+  @include flow-common.connection;
+  @include flow-common.line-alignment
+}
+
+.f-node {
+  @include flow-common.node;
+}
+

projects/f-examples/extensions/help-in-positioning-example/help-in-positioning-example.component.ts

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

public/markdown/examples/minimap.md

@@ -0,0 +1,17 @@
+# Minimap
+
+## Description
+
+This guide shows how to create a minimap that shows the entire canvas and allows you to navigate the canvas by dragging the minimap.
+
+## Example
+
+::: ng-component <minimap-example></minimap-example> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/minimap-example/minimap-example.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/minimap-example/minimap-example.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/minimap-example/minimap-example.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+

public/markdown/examples/zoom.md

@@ -0,0 +1,17 @@
+# Zoom
+
+## Description
+
+This guide shows how to zoom in and out of the canvas using the mouse wheel, double click, and buttons.
+
+## Example
+
+::: ng-component <zoom-example></zoom-example> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom-example/zoom-example.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom-example/zoom-example.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom-example/zoom-example.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+