feat: Update to f-docs v1.2.1

Author: siarheihuzarevich

package.json

@@ -59,7 +59,7 @@
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
     "@foblex/core": "^1.1.6",
-    "@foblex/f-docs": "^1.2.0",
+    "@foblex/f-docs": "^1.2.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

projects/f-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "description": "An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.",
   "main": "index.js",
   "types": "index.d.ts",

projects/f-flow/src/domain/subscribe-on-transform-changes/subscribe-on-transform-changes.execution.ts

@@ -1,7 +1,7 @@
 import { SubscribeOnTransformChangesRequest } from './subscribe-on-transform-changes.request';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { FTransformStore } from '../../f-storage';
+import { merge, Observable } from 'rxjs';
+import { FComponentsStore, FTransformStore } from '../../f-storage';
 import { FExecutionRegister, IExecution } from '../../infrastructure';
 
 @Injectable()
@@ -11,10 +11,14 @@ export class SubscribeOnTransformChangesExecution
 
   constructor(
     private fTransformStore: FTransformStore,
+    private fComponentsStore: FComponentsStore
   ) {
   }
 
   public handle(request: SubscribeOnTransformChangesRequest): Observable<void> {
-    return this.fTransformStore.changes;
+    return merge(
+      this.fTransformStore.changes,
+      this.fComponentsStore.changes
+    );
   }
 }

projects/f-flow/src/f-draggable/f-draggable.directive.ts

@@ -1,5 +1,5 @@
 import {
-  AfterViewInit, ContentChild, ContentChildren,
+  AfterViewInit, ContentChildren,
   Directive,
   ElementRef,
   EventEmitter, Inject,

projects/f-flow/src/f-draggable/providers.ts

@@ -5,7 +5,7 @@ import { EXTERNAL_ITEM_PROVIDERS } from './external-item';
 import { NODE_PROVIDERS } from './node';
 import { NODE_RESIZE_PROVIDERS } from './node-resize';
 import { SELECTION_AREA_PROVIDERS } from './selection-area';
-import { F_MINIMAP_DRAG_AND_DROP_PROVIDERS } from '../f-minimap';
+import { F_MINIMAP_DRAG_AND_DROP_PROVIDERS } from '../f-minimap/domain/providers';
 
 export const F_DRAGGABLE_PROVIDERS = [
 

projects/f-flow/src/f-minimap/domain/calculate-flow-point-from-minimap-point/calculate-flow-point-from-minimap-point.execution.ts

@@ -14,7 +14,6 @@ export class CalculateFlowPointFromMinimapPointExecution
     return this.fComponentsStore.fCanvas!.transform.scale;
   }
 
-
   constructor(
     private fComponentsStore: FComponentsStore
   ) {

projects/f-flow/src/f-minimap/domain/minimap-drag-preparation/minimap-drag-preparation.validator.ts

@@ -2,18 +2,21 @@ import { Injectable } from '@angular/core';
 import { MinimapDragPreparationRequest } from './minimap-drag-preparation.request';
 import { FValidatorRegister, IValidator } from '../../../infrastructure';
 import { FDraggableDataContext } from '../../../f-draggable';
+import { FComponentsStore } from '../../../f-storage';
 
 @Injectable()
 @FValidatorRegister(MinimapDragPreparationRequest)
 export class MinimapDragPreparationValidator implements IValidator<MinimapDragPreparationRequest> {
 
   constructor(
+    private fComponentsStore: FComponentsStore,
     private fDraggableDataContext: FDraggableDataContext
   ) {
   }
 
   public handle(request: MinimapDragPreparationRequest): boolean {
     return !this.fDraggableDataContext.draggableItems.length &&
-      !!request.event.targetElement.closest('.f-minimap');
+      !!request.event.targetElement.closest('.f-minimap') &&
+      this.fComponentsStore.flowHost.contains(request.event.targetElement);
   }
 }

projects/f-flow/src/f-minimap/f-minimap-canvas.directive.ts

@@ -3,14 +3,14 @@ import {
 } from "@angular/core";
 import { FComponentsStore } from '../f-storage';
 import {
-  DomElementExtensions, IRect, Point,
+  DomElementExtensions, IRect,
   RectExtensions
 } from '@foblex/core';
 import { FFlowMediator } from '../infrastructure';
 import { FNodeBase } from '../f-node';
 
 @Directive({
-  selector: 'g[f-minimap-canvas]'
+  selector: 'g[fMinimapCanvas]'
 })
 export class FMinimapCanvasDirective {
 

projects/f-flow/src/f-minimap/f-minimap-flow.directive.ts

@@ -2,13 +2,13 @@ import {
   Directive, ElementRef, Input,
 } from "@angular/core";
 import { FComponentsStore } from '../f-storage';
-import { IRect, ISize, Point, RectExtensions, SizeExtensions } from '@foblex/core';
+import { IRect, ISize, RectExtensions, SizeExtensions } from '@foblex/core';
 import { FFlowMediator } from '../infrastructure';
 import { FMinimapData } from './domain';
 import { GetNodesRectRequest } from '../domain';
 
 @Directive({
-  selector: 'svg[f-minimap-flow]'
+  selector: 'svg[fMinimapFlow]'
 })
 export class FMinimapFlowDirective {
 

projects/f-flow/src/f-minimap/f-minimap-view.directive.ts

@@ -3,7 +3,7 @@ import { FComponentsStore } from '../f-storage';
 import { IRect, RectExtensions } from '@foblex/core';
 
 @Directive({
-  selector: 'rect[f-minimap-view]',
+  selector: 'rect[fMinimapView]',
   host: {
     'class': 'f-component f-minimap-view',
   }

projects/f-flow/src/f-minimap/f-minimap.component.html

@@ -1,6 +1,5 @@
-<svg f-minimap-flow width="100%" height="100%" fLockedContext [fMinSize]="fMinSize"
-     style="display: block; vertical-align: middle;" xmlns="http://www.w3.org/2000/svg">
-  <g f-minimap-canvas></g>
-  <rect f-minimap-view x="0" y="0" width="100%" height="100%" stroke="none"/>
+<svg fMinimapFlow width="100%" height="100%" fLockedContext [fMinSize]="fMinSize">
+  <g fMinimapCanvas></g>
+  <rect fMinimapView x="0" y="0" width="100%" height="100%" stroke="none"/>
 </svg>
 

projects/f-flow/src/f-minimap/f-minimap.component.ts

@@ -3,12 +3,11 @@ import {
   ElementRef, Input, OnDestroy, ViewChild,
 } from "@angular/core";
 import { FFlowMediator } from '../infrastructure';
-import { debounceTime, merge, Observable, Subscription } from 'rxjs';
+import { debounceTime, Observable, Subscription } from 'rxjs';
 import { SubscribeOnTransformChangesRequest } from '../domain';
 import { FMinimapFlowDirective } from './f-minimap-flow.directive';
 import { FMinimapCanvasDirective } from './f-minimap-canvas.directive';
 import { FMinimapViewDirective } from './f-minimap-view.directive';
-import { FComponentsStore } from '../f-storage';
 import { IPointerEvent } from '@foblex/core';
 import { F_DRAG_AND_DROP_PLUGIN, IFDragAndDropPlugin } from '../f-draggable';
 import { MinimapDragFinalizeRequest, MinimapDragPreparationRequest } from './domain';
@@ -44,7 +43,6 @@ export class FMinimapComponent implements AfterViewInit, OnDestroy, IFDragAndDro
 
   constructor(
     private elementReference: ElementRef<HTMLElement>,
-    private fComponentsStore: FComponentsStore,
     private fMediator: FFlowMediator
   ) {
   }
@@ -62,10 +60,7 @@ export class FMinimapComponent implements AfterViewInit, OnDestroy, IFDragAndDro
   }
 
   private getTransformChanges(): Observable<void> {
-    return merge(
-      this.fMediator.send<Observable<void>>(new SubscribeOnTransformChangesRequest()),
-      this.fComponentsStore.changes
-    );
+    return this.fMediator.send<Observable<void>>(new SubscribeOnTransformChangesRequest());
   }
 
   public onPointerDown(event: IPointerEvent): void {

public/docs/en/f-external-item-directive.md

@@ -1 +1 @@
-@import "@foblex/f-docs/assets/styles/styles";
+@import "@foblex/f-docs/assets/styles/styles.scss";