@foblex/flow 17.4.3 → 17.4.5

package/f-node/f-node.directive.d.ts

@@ -7,6 +7,8 @@ import * as i0 from "@angular/core";
 export declare class FNodeDirective extends FNodeBase implements OnInit, AfterViewInit, IHasHostElement, OnDestroy {
     private renderer;
     private fBrowser;
+    private readonly _destroyRef;
+    private readonly _fMediator;
     fId: string;
     fParentId: string | null | undefined;
     set position(value: IPoint);
@@ -22,8 +24,7 @@ export declare class FNodeDirective extends FNodeBase implements OnInit, AfterVi
     fSelectionDisabled: boolean;
     fIncludePadding: boolean;
     fConnectOnNode: boolean;
-    private readonly _destroyRef;
-    private readonly _fMediator;
+    fMinimapClass: string[] | string;
     constructor(elementReference: ElementRef<HTMLElement>, renderer: Renderer2, fBrowser: BrowserService);
     ngOnInit(): void;
     protected setStyle(styleName: string, value: string): void;
@@ -33,7 +34,7 @@ export declare class FNodeDirective extends FNodeBase implements OnInit, AfterVi
     refresh(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FNodeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FNodeDirective, "[fNode]", ["fComponent"], { "fId": { "alias": "fNodeId"; "required": false; }; "fParentId": { "alias": "fNodeParentId"; "required": false; }; "position": { "alias": "fNodePosition"; "required": false; }; "size": { "alias": "fNodeSize"; "required": false; }; "rotate": { "alias": "fNodeRotate"; "required": false; }; "fDraggingDisabled": { "alias": "fNodeDraggingDisabled"; "required": false; }; "fSelectionDisabled": { "alias": "fNodeSelectionDisabled"; "required": false; }; "fIncludePadding": { "alias": "fIncludePadding"; "required": false; }; "fConnectOnNode": { "alias": "fConnectOnNode"; "required": false; }; }, { "positionChange": "fNodePositionChange"; "rotateChange": "fNodeRotateChange"; "sizeChange": "fNodeSizeChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FNodeDirective, "[fNode]", ["fComponent"], { "fId": { "alias": "fNodeId"; "required": false; }; "fParentId": { "alias": "fNodeParentId"; "required": false; }; "position": { "alias": "fNodePosition"; "required": false; }; "size": { "alias": "fNodeSize"; "required": false; }; "rotate": { "alias": "fNodeRotate"; "required": false; }; "fDraggingDisabled": { "alias": "fNodeDraggingDisabled"; "required": false; }; "fSelectionDisabled": { "alias": "fNodeSelectionDisabled"; "required": false; }; "fIncludePadding": { "alias": "fIncludePadding"; "required": false; }; "fConnectOnNode": { "alias": "fConnectOnNode"; "required": false; }; "fMinimapClass": { "alias": "fMinimapClass"; "required": false; }; }, { "positionChange": "fNodePositionChange"; "rotateChange": "fNodeRotateChange"; "sizeChange": "fNodeSizeChange"; }, never, never, false, never>;
     static ngAcceptInputType_fDraggingDisabled: unknown;
     static ngAcceptInputType_fSelectionDisabled: unknown;
     static ngAcceptInputType_fIncludePadding: unknown;

package/f-node/providers.d.ts

@@ -1,4 +1,4 @@
 import { FNodeDirective } from './f-node.directive';
 import { FGroupDirective } from './f-group.directive';
-import { FDragHandleDirective } from './f-drag-handle.directive';
-export declare const F_NODE_PROVIDERS: (typeof FGroupDirective | typeof FNodeDirective | typeof FDragHandleDirective)[];
+import { FRotateHandleDirective } from './f-rotate-handle';
+export declare const F_NODE_PROVIDERS: (typeof FRotateHandleDirective | typeof FGroupDirective | typeof FNodeDirective)[];

package/f-selection-area/domain/providers.d.ts

@@ -1,3 +1,3 @@
 import { SelectionAreaPreparationExecution } from './selection-area-preparation';
 import { SelectionAreaFinalizeExecution } from './selection-area-finalize';
-export declare const F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS: (typeof SelectionAreaPreparationExecution | typeof SelectionAreaFinalizeExecution)[];
+export declare const F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS: (typeof SelectionAreaFinalizeExecution | typeof SelectionAreaPreparationExecution)[];

package/f-storage/providers.d.ts

@@ -4,4 +4,4 @@ import { FComponentsStore } from './f-components-store';
 import { ListenCountChangesExecution } from './features/listen-count-changes';
 import { ListenTransformChangesExecution } from './features/listen-transform-changes';
 import { NotifyTransformChangedExecution } from './features/notify-transform-changed';
-export declare const F_STORAGE_PROVIDERS: (typeof FComponentsStore | typeof NotifyDataChangedExecution | typeof ListenCountChangesExecution | typeof ListenDataChangesExecution | typeof ListenTransformChangesExecution | typeof NotifyTransformChangedExecution)[];
+export declare const F_STORAGE_PROVIDERS: (typeof NotifyDataChangedExecution | typeof FComponentsStore | typeof ListenDataChangesExecution | typeof ListenCountChangesExecution | typeof ListenTransformChangesExecution | typeof NotifyTransformChangedExecution)[];

package/fesm2022/foblex-flow.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, effect, Directive, input, computed, EventEmitter, DestroyRef, booleanAttribute, Input, Output, ElementRef, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, Injector, ViewContainerRef, TemplateRef, NgZone, contentChild, output, viewChild, Renderer2, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, effect, Directive, input, computed, DestroyRef, EventEmitter, booleanAttribute, Input, Output, ElementRef, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, Injector, ViewContainerRef, TemplateRef, NgZone, contentChild, output, viewChild, Renderer2, NgModule } from '@angular/core';
 import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, SizeExtensions, Point, LineExtensions, GetIntersections, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
 import * as i2$1 from '@foblex/mediator';
@@ -1214,6 +1214,8 @@ let uniqueId$b = 0;
 class FGroupDirective extends FNodeBase {
     renderer;
     fBrowser;
+    _destroyRef = inject(DestroyRef);
+    _fMediator = inject(FMediator);
     fId = `f-group-${uniqueId$b++}`;
     fParentId = null;
     set position(value) {
@@ -1253,8 +1255,7 @@ class FGroupDirective extends FNodeBase {
     fSelectionDisabled = false;
     fIncludePadding = true;
     fConnectOnNode = true;
-    _destroyRef = inject(DestroyRef);
-    _fMediator = inject(FMediator);
+    fMinimapClass = [];
     constructor(elementReference, renderer, fBrowser) {
         super(elementReference.nativeElement);
         this.renderer = renderer;
@@ -1293,7 +1294,7 @@ class FGroupDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FGroupDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], rotate: ["fGroupRotate", "rotate"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fGroupPositionChange", rotateChange: "fGroupRotateChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], rotate: ["fGroupRotate", "rotate"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute], fMinimapClass: "fMinimapClass" }, outputs: { positionChange: "fGroupPositionChange", rotateChange: "fGroupRotateChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
             { provide: F_NODE, useExisting: FGroupDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1348,12 +1349,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], fConnectOnNode: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], fMinimapClass: [{
+                type: Input
             }] } });
 
 let uniqueId$a = 0;
 class FNodeDirective extends FNodeBase {
     renderer;
     fBrowser;
+    _destroyRef = inject(DestroyRef);
+    _fMediator = inject(FMediator);
     fId = `f-node-${uniqueId$a++}`;
     fParentId = null;
     set position(value) {
@@ -1394,8 +1399,7 @@ class FNodeDirective extends FNodeBase {
     fIncludePadding = true;
     //Add ability to connect to first connectable input if node is at pointer position
     fConnectOnNode = true;
-    _destroyRef = inject(DestroyRef);
-    _fMediator = inject(FMediator);
+    fMinimapClass = [];
     constructor(elementReference, renderer, fBrowser) {
         super(elementReference.nativeElement);
         this.renderer = renderer;
@@ -1434,7 +1438,7 @@ class FNodeDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], rotate: ["fNodeRotate", "rotate"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fNodePositionChange", rotateChange: "fNodeRotateChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], rotate: ["fNodeRotate", "rotate"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute], fMinimapClass: "fMinimapClass" }, outputs: { positionChange: "fNodePositionChange", rotateChange: "fNodeRotateChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1489,6 +1493,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], fConnectOnNode: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], fMinimapClass: [{
+                type: Input
             }] } });
 
 function isNode(element) {
@@ -2454,7 +2460,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     fOutputId;
     fInputId;
     fRadius = 8;
-    fOffset = 32;
+    fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
     fType = EFConnectionType.STRAIGHT;
     fDraggingDisabled = false;
@@ -2545,7 +2551,7 @@ class FConnectionComponent extends FConnectionBase {
     fOutputId = '';
     fInputId = '';
     fRadius = 8;
-    fOffset = 32;
+    fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
     fType = EFConnectionType.STRAIGHT;
     fDraggingDisabled = false;
@@ -2725,7 +2731,7 @@ class FSnapConnectionComponent extends FConnectionBase {
     fOutputId;
     fInputId;
     fRadius = 8;
-    fOffset = 32;
+    fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
     fType = EFConnectionType.STRAIGHT;
     fDraggingDisabled = false;
@@ -5599,7 +5605,7 @@ let FNodeDropToGroupPreparationExecution = class FNodeDropToGroupPreparationExec
             const rect = this._fMediator.execute(new GetNormalizedElementRectRequest(x.hostElement, false));
             return {
                 node: x,
-                rect: RectExtensions.initialize(rect.x + this._fCanvasPosition.x, rect.y + this._fCanvasPosition.y, rect.width * this._transform.scale, rect.height * this._transform.scale)
+                rect: RectExtensions.initialize(rect.x * this._transform.scale + this._fCanvasPosition.x, rect.y * this._transform.scale + this._fCanvasPosition.y, rect.width * this._transform.scale, rect.height * this._transform.scale)
             };
         });
     }
@@ -6534,6 +6540,9 @@ class FExternalItemDragHandler {
     get _fItemHost() {
         return this._fExternalItem.hostElement;
     }
+    get _body() {
+        return this._fBrowser.document.fullscreenElement ?? this._fBrowser.document.body;
+    }
     constructor(_injector, _fExternalItem) {
         this._fExternalItem = _fExternalItem;
         this.fData = { fData: _fExternalItem.fData };
@@ -6553,11 +6562,11 @@ class FExternalItemDragHandler {
             this._matchElementSize(this._preview, this._onPointerDownRect);
         }
         this._preview.style.transform = setTransform(this._onPointerDownRect);
-        this._fBrowser.document.body.appendChild(this._preview);
+        this._body.appendChild(this._preview);
     }
     _createAndAppendPlaceholder() {
         this._placeholder = this._fMediator.execute(new FExternalItemCreatePlaceholderRequest(this._fExternalItem));
-        this._fBrowser.document.body.appendChild(this._fItemHost.parentElement.replaceChild(this._placeholder, this._fItemHost));
+        this._body.appendChild(this._fItemHost.parentElement.replaceChild(this._placeholder, this._fItemHost));
     }
     _matchElementSize(target, sourceRect) {
         target.style.width = `${sourceRect.width}px`;
@@ -6582,7 +6591,7 @@ class FExternalItemDragHandler {
         this._preview.style.transform = setTransform(position);
     }
     onPointerUp() {
-        this._fBrowser.document.body.removeChild(this._preview);
+        this._body.removeChild(this._preview);
         this._placeholder.parentElement.replaceChild(this._fItemHost, this._placeholder);
     }
 }
@@ -7298,10 +7307,19 @@ let MinimapDrawNodesExecution = class MinimapDrawNodesExecution {
     }
     _applyClassList(element, node, isNode) {
         element.classList.add('f-component', isNode ? 'f-minimap-node' : 'f-minimap-group');
+        element.classList.add(...this._getClassList(node));
         if (node.isSelected()) {
             element.classList.add('f-selected');
         }
     }
+    _getClassList(node) {
+        if (Array.isArray(node.fMinimapClass)) {
+            return node.fMinimapClass;
+        }
+        else {
+            return [node.fMinimapClass];
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MinimapDrawNodesExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MinimapDrawNodesExecution });
 };
@@ -9435,6 +9453,7 @@ class FCanvasComponent extends FCanvasBase {
     _fMediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     _injector = inject(Injector);
+    _flowId;
     fCanvasChange = output();
     position = input(PointExtensions.initialize(), { transform: PointExtensions.castToPoint });
     scale = input(1, { transform: numberAttribute });
@@ -9444,7 +9463,11 @@ class FCanvasComponent extends FCanvasBase {
     fGroupsContainer = viewChild.required('fGroupsContainer');
     fNodesContainer = viewChild.required('fNodesContainer');
     fConnectionsContainer = viewChild.required('fConnectionsContainer');
+    get flowId() {
+        return this._flowId;
+    }
     ngOnInit() {
+        this._flowId = this._fMediator.execute(new GetFlowRequest()).fId();
         this._fMediator.execute(new AddCanvasToStoreRequest(this));
         this._positionChange();
         this._scaleChange();
@@ -9710,7 +9733,7 @@ class FFlowComponent extends FFlowBase {
     _emitLoaded() {
         if (!this._isLoaded) {
             this._isLoaded = true;
-            this.fLoaded.emit();
+            this.fLoaded.emit(this.fId());
         }
     }
     redraw() {