docs: Added zoom example

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

@@ -0,0 +1,13 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas [fZoom]="isZoomEnabled">
+    <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-flow>
+<div class="toolbar">
+  <button class="f-button" (click)="onZoomIn()">Zoom In</button>
+  <button class="f-button" (click)="onZoomOut()">Zoom Out</button>
+  <f-checkbox [checked]="isZoomEnabled" (change)="onZoomOnMouseWheelChanged($event)">Zoom on mouse wheel</f-checkbox>
+</div>
+

projects/f-examples/zoom-example/zoom-example.component.scss → projects/f-examples/extensions/zoom-example/zoom-example.component.scss

@@ -1,4 +1,4 @@
-@use "../flow-common";
+@use "../../flow-common";
 
 ::ng-deep zoom-example {
   @include flow-common.connection;
@@ -7,3 +7,7 @@
 .f-node {
   @include flow-common.node;
 }
+
+.toolbar {
+  @include flow-common.toolbar;
+}

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

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FCreateConnectionEvent, FFlowModule, FZoomDirective } from '@foblex/flow';
+import { FCheckboxComponent } from '@foblex/f-docs';
+
+@Component({
+  selector: 'zoom-example',
+  styleUrls: [ './zoom-example.component.scss' ],
+  templateUrl: './zoom-example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule,
+    FCheckboxComponent
+  ]
+})
+export class ZoomExampleComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  @ViewChild(FZoomDirective, { static: true })
+  public fZoom!: FZoomDirective;
+
+  public isZoomEnabled: boolean = true;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+  }
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+
+  public onZoomIn(): void {
+    this.fZoom.zoomIn();
+  }
+
+  public onZoomOut(): void {
+    this.fZoom.zoomOut();
+  }
+
+  public onZoomOnMouseWheelChanged(checked: boolean): void {
+    this.isZoomEnabled = checked;
+    this.changeDetectorRef.detectChanges();
+  }
+}