@foblex/flow 17.8.9 → 17.9.1

package/fesm2022/foblex-flow.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Directive, input, computed, signal, Injector, Renderer2, effect, untracked, DestroyRef, model, output, booleanAttribute, ElementRef, Input, viewChild, Component, ChangeDetectionStrategy, isDevMode, contentChildren, numberAttribute, ViewContainerRef, TemplateRef, EventEmitter, NgZone, Output, ContentChildren, contentChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, input, computed, signal, Injector, Renderer2, effect, untracked, DestroyRef, model, output, booleanAttribute, ElementRef, Input, viewChild, Component, ChangeDetectionStrategy, isDevMode, contentChildren, numberAttribute, ViewContainerRef, TemplateRef, NgZone, EventEmitter, Output, ContentChildren, contentChild, NgModule } from '@angular/core';
 import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, Point, LineExtensions, GetIntersections, SizeExtensions, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
 import { BrowserService, PlatformService, EOperationSystem } from '@foblex/platform';
 import { normalizeDomElementId, castToEnum, isClosestElementHasClass, flatMap, getOrCreateRootNodeForViewRef, deepCloneNode, disableDragInteractions, extendStyles, getDataAttrValueFromClosestElementWithClass } from '@foblex/utils';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
@@ -3326,7 +3326,7 @@ class FConnectionComponent extends FConnectionBase {
         this._mediator.execute(new RemoveConnectionFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionComponent, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fText: { classPropertyName: "fText", publicName: "fText", isSignal: false, isRequired: false, transformFunction: null }, fTextStartOffset: { classPropertyName: "fTextStartOffset", publicName: "fTextStartOffset", isSignal: false, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: true, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: true, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: true, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "fId()", "class.f-connection-selection-disabled": "fSelectionDisabled()", "class.f-connection-reassign-disabled": "fDraggingDisabled()" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  style=\"overflow: visible; display: block; vertical-align: middle;\"\n>\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionComponent, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fText: { classPropertyName: "fText", publicName: "fText", isSignal: false, isRequired: false, transformFunction: null }, fTextStartOffset: { classPropertyName: "fTextStartOffset", publicName: "fTextStartOffset", isSignal: false, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: true, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: true, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: true, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "fId()", "class.f-connection-selection-disabled": "fSelectionDisabled()", "class.f-connection-reassign-disabled": "fDraggingDisabled()" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  style=\"display: block; vertical-align: middle;\"\n>\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none}:host svg{overflow:visible!important;position:absolute}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
@@ -3335,7 +3335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         class: 'f-component f-connection',
                         '[class.f-connection-selection-disabled]': 'fSelectionDisabled()',
                         '[class.f-connection-reassign-disabled]': 'fDraggingDisabled()',
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  style=\"overflow: visible; display: block; vertical-align: middle;\"\n>\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"] }]
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  style=\"display: block; vertical-align: middle;\"\n>\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none}:host svg{overflow:visible!important;position:absolute}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"] }]
         }], propDecorators: { fText: [{
                 type: Input
             }], fTextStartOffset: [{
@@ -4841,7 +4841,6 @@ class FCanvasMoveFinalizeRequest {
 }
 
 class FDraggableDataContext {
-    isDragging = false;
     selectedItems = [];
     isSelectedChanged = false;
     onPointerDownScale = 1;
@@ -4871,6 +4870,7 @@ class FCanvasDragHandler {
     _onPointerDownPosition = PointExtensions.initialize();
     constructor(_injector) {
         this._store = _injector.get(FComponentsStore);
+        this._store.fCanvas?.hostElement.classList.add('canvas-dragging');
     }
     prepareDragSequence() {
         this._onPointerDownPosition = this._store.fCanvas.transform.position;
@@ -4881,6 +4881,7 @@ class FCanvasDragHandler {
     }
     onPointerUp() {
         this._store.fCanvas.emitCanvasChangeEvent();
+        this._store.fCanvas?.hostElement.classList.remove('canvas-dragging');
     }
 }
 
@@ -8669,11 +8670,12 @@ let FSingleSelectExecution = class FSingleSelectExecution {
         return this._getNodeOrGroup(event.targetElement) || this._getConnection(event.targetElement);
     }
     _getNodeOrGroup(targetElement) {
-        return this._store.fNodes.find((x) => (x).isContains(targetElement));
+        return this._store.fNodes.find((x) => x.isContains(targetElement));
     }
     _getConnection(element) {
-        return this._store.fConnections
-            .find(c => c.isContains(element) || c.fConnectionCenter()?.nativeElement?.contains(element));
+        return this._store.fConnections.find((c) => c.isContains(element) ||
+            c.fConnectionCenter()?.nativeElement?.contains(element) ||
+            Array.from(c.fConnectionContents()?.values() ?? []).some((content) => content.hostElement?.contains(element)));
     }
     _updateItemAndChildrenLayers(fItem) {
         if (fItem) {
@@ -8853,34 +8855,33 @@ class ITouchMoveEvent extends IPointerEvent {
 }
 
 class EventExtensions {
-    static isSupported;
-    static isPassiveEventListenerSupported() {
-        if (EventExtensions.isSupported == null && typeof window !== 'undefined') {
+    static _isSupported;
+    static _isPassiveEventListenerSupported() {
+        if (EventExtensions._isSupported == null && typeof window !== 'undefined') {
             try {
                 window.addEventListener('test', EventExtensions.emptyListener, { passive: true });
-                EventExtensions.isSupported = true;
+                EventExtensions._isSupported = true;
             }
             catch (e) {
-                EventExtensions.isSupported = false;
+                EventExtensions._isSupported = false;
             }
         }
-        return EventExtensions.isSupported;
+        return EventExtensions._isSupported;
     }
-    static passiveEventListener(options) {
-        return EventExtensions.isPassiveEventListenerSupported() ? options : !!options.capture;
+    static _passiveEventListener(options) {
+        return EventExtensions._isPassiveEventListenerSupported() ? options : !!options.capture;
     }
     static activeListener() {
-        return EventExtensions.passiveEventListener({ passive: false });
+        return EventExtensions._passiveEventListener({ passive: false });
     }
     static passiveListener() {
-        return EventExtensions.passiveEventListener({ passive: true });
+        return EventExtensions._passiveEventListener({ passive: true });
     }
     static activeCaptureListener() {
-        return EventExtensions.passiveEventListener({ passive: false, capture: true });
+        return EventExtensions._passiveEventListener({ passive: false, capture: true });
     }
     static emptyListener() {
-        return () => {
-        };
+        return () => { };
     }
 }
 
@@ -8891,57 +8892,53 @@ const MOUSE_EVENT_IGNORE_TIME = 800;
  * and provides abstract methods for derived classes to implement specific behaviors.
  */
 class DragAndDropBase {
-    ngZone;
-    document;
-    mouseListeners = EventExtensions.emptyListener();
-    touchListeners = EventExtensions.emptyListener();
-    startListeners = EventExtensions.emptyListener();
-    isSyntheticEvent(event) {
-        return !!this.lastTouchEventTime &&
-            (this.lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now());
-    }
-    lastTouchEventTime = 0;
+    _document = inject(DOCUMENT);
+    _ngZone = inject(NgZone, { optional: true });
+    _mouseListeners = EventExtensions.emptyListener();
+    _touchListeners = EventExtensions.emptyListener();
+    _startListeners = EventExtensions.emptyListener();
+    isSyntheticEvent(_event) {
+        return (!!this._lastTouchEventTime && this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now());
+    }
+    _lastTouchEventTime = 0;
     isDragStarted = false;
-    dragStartThreshold = 3;
-    dragStartDelay = 0;
-    dragStartTime = 0;
-    dragStartPosition = { x: 0, y: 0 };
-    moveHandler = this.checkDragSequenceToStart;
-    pointerDownElement = null;
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-    }
+    _dragStartThreshold = 3;
+    _dragStartDelay = 0;
+    _dragStartTime = 0;
+    _dragStartPosition = { x: 0, y: 0 };
+    _moveHandler = this._checkDragSequenceToStart;
+    _pointerDownElement = null;
     /**
      * Handles the mouse down event to initiate the drag sequence.
      * It checks if the event is synthetic or fake, and if the drag is already started.
      * If not, it sets up the drag start sequence by adding necessary event listeners.
      * @param event - The mouse event that triggered the drag.
      */
-    onMouseDown = (event) => {
+    _onMouseDown = (event) => {
         const isSyntheticEvent = this.isSyntheticEvent(event);
         const isFakeEvent = isFakeMousedownFromScreenReader(event);
         const mouseEvent = new IMouseEvent(event);
         if (isSyntheticEvent || isFakeEvent || this.disabled || this.isDragStarted) {
             return;
         }
-        this.pointerDownElement = mouseEvent.targetElement;
+        this._pointerDownElement = mouseEvent.targetElement;
         const result = this.onPointerDown(mouseEvent);
         if (result) {
-            this.dragStartTime = Date.now();
-            this.dragStartPosition = mouseEvent.getPosition();
-            this.ngZone?.runOutsideAngular(() => {
-                this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                this.document?.addEventListener('mousemove', this.onMouseMove);
-                this.document?.addEventListener('pointerup', this.onPointerUpEvent);
-                this.document?.addEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
-                this.document?.addEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
+            this._dragStartTime = Date.now();
+            this._dragStartPosition = mouseEvent.getPosition();
+            this._ngZone?.runOutsideAngular(() => {
+                this._listen('selectstart', this._onSelectStart, EventExtensions.activeListener());
+                this._listen('mousemove', this._onMouseMove);
+                this._listen('pointerup', this._onPointerUpEvent);
+                this._listen('pointercancel', this._onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this._listen('contextmenu', this._preventDuringDrag, EventExtensions.activeCaptureListener());
             });
-            this.mouseListeners = () => {
-                this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                this.document?.removeEventListener('mousemove', this.onMouseMove);
-                this.document?.removeEventListener('pointerup', this.onPointerUpEvent);
-                this.document?.removeEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
-                this.document?.removeEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
+            this._mouseListeners = () => {
+                this._unlisten('selectstart', this._onSelectStart, EventExtensions.activeListener());
+                this._unlisten('mousemove', this._onMouseMove);
+                this._unlisten('pointerup', this._onPointerUpEvent);
+                this._unlisten('pointercancel', this._onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this._unlisten('contextmenu', this._preventDuringDrag, EventExtensions.activeCaptureListener());
             };
         }
     };
@@ -8951,30 +8948,30 @@ class DragAndDropBase {
      * If not, it sets up the drag start sequence by adding necessary event listeners.
      * @param event - The touch event that triggered the drag.
      */
-    onTouchDown = (event) => {
+    _onTouchDown = (event) => {
         const isFakeEvent = isFakeTouchstartFromScreenReader(event);
         const touchEvent = new ITouchDownEvent(event);
         if (isFakeEvent || this.disabled || this.isDragStarted) {
             return;
         }
-        this.pointerDownElement = touchEvent.targetElement;
+        this._pointerDownElement = touchEvent.targetElement;
         const result = this.onPointerDown(touchEvent);
         if (result) {
-            this.dragStartTime = Date.now();
-            this.dragStartPosition = touchEvent.getPosition();
-            this.ngZone?.runOutsideAngular(() => {
-                this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                this.document?.addEventListener('touchmove', this.onTouchMove);
-                this.document?.addEventListener('pointerup', this.onPointerUpEvent);
-                this.document?.addEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
-                this.document?.addEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
+            this._dragStartTime = Date.now();
+            this._dragStartPosition = touchEvent.getPosition();
+            this._ngZone?.runOutsideAngular(() => {
+                this._listen('selectstart', this._onSelectStart, EventExtensions.activeListener());
+                this._listen('touchmove', this._onTouchMove);
+                this._listen('pointerup', this._onPointerUpEvent);
+                this._listen('pointercancel', this._onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this._listen('contextmenu', this._preventDuringDrag, EventExtensions.activeCaptureListener());
             });
-            this.touchListeners = () => {
-                this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                this.document?.removeEventListener('touchmove', this.onTouchMove);
-                this.document?.removeEventListener('pointerup', this.onPointerUpEvent);
-                this.document?.removeEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
-                this.document?.removeEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
+            this._touchListeners = () => {
+                this._unlisten('selectstart', this._onSelectStart, EventExtensions.activeListener());
+                this._unlisten('touchmove', this._onTouchMove);
+                this._unlisten('pointerup', this._onPointerUpEvent);
+                this._unlisten('pointercancel', this._onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this._unlisten('contextmenu', this._preventDuringDrag, EventExtensions.activeCaptureListener());
             };
         }
     };
@@ -8984,7 +8981,7 @@ class DragAndDropBase {
      * It prevents the default behavior and calls the onSelect method to handle the selection.
      * @param event - The event that triggered the select start.
      */
-    onSelectStart = (event) => {
+    _onSelectStart = (event) => {
         this.onSelect(event);
     };
     /**
@@ -8992,16 +8989,16 @@ class DragAndDropBase {
      * It checks if the drag sequence should start and calls the move handler accordingly.
      * @param event - The mouse event that triggered the move.
      */
-    onMouseMove = (event) => {
-        this.moveHandler(new IMouseEvent(event));
+    _onMouseMove = (event) => {
+        this._moveHandler(new IMouseEvent(event));
     };
     /**
      * Handles the touch move event during the drag sequence.
      * It checks if the drag sequence should start and calls the move handler accordingly.
      * @param event - The touch event that triggered the move.
      */
-    onTouchMove = (event) => {
-        this.moveHandler(new ITouchMoveEvent(event));
+    _onTouchMove = (event) => {
+        this._moveHandler(new ITouchMoveEvent(event));
     };
     /**
      * Checks if the drag sequence should start based on the pointer position.
@@ -9011,25 +9008,25 @@ class DragAndDropBase {
      * it prepares the drag sequence and sets the move handler to onPointerMove.
      * @param event - The pointer event that triggered the check.
      */
-    checkDragSequenceToStart(event) {
+    _checkDragSequenceToStart(event) {
         const pointerPosition = event.getPosition();
-        if (!this.isDragStarted && this.pointerDownElement) {
-            event.setTarget(this.pointerDownElement);
-            const distanceX = Math.abs(pointerPosition.x - this.dragStartPosition.x);
-            const distanceY = Math.abs(pointerPosition.y - this.dragStartPosition.y);
-            const isOverThreshold = distanceX + distanceY >= this.dragStartThreshold;
+        if (!this.isDragStarted && this._pointerDownElement) {
+            event.setTarget(this._pointerDownElement);
+            const distanceX = Math.abs(pointerPosition.x - this._dragStartPosition.x);
+            const distanceY = Math.abs(pointerPosition.y - this._dragStartPosition.y);
+            const isOverThreshold = distanceX + distanceY >= this._dragStartThreshold;
             if (isOverThreshold) {
-                const isDelayElapsed = Date.now() >= this.dragStartTime + this.dragStartDelay;
+                const isDelayElapsed = Date.now() >= this._dragStartTime + this._dragStartDelay;
                 if (!isDelayElapsed) {
-                    this.endDragSequence();
+                    this._endDragSequence();
                     return;
                 }
                 event.preventDefault();
                 this.prepareDragSequence(event);
                 this.isDragStarted = true;
-                this.moveHandler = this.onPointerMove;
+                this._moveHandler = this.onPointerMove;
                 if (isTouchEvent(event.originalEvent)) {
-                    this.lastTouchEventTime = Date.now();
+                    this._lastTouchEventTime = Date.now();
                 }
             }
         }
@@ -9041,11 +9038,11 @@ class DragAndDropBase {
      * This method is called when the user releases the mouse button or lifts their finger from the touch screen.
      * @param event - The pointer event that triggered the up action.
      */
-    onPointerUpEvent = (event) => {
+    _onPointerUpEvent = (event) => {
         if (this.isDragStarted) {
             this.onPointerUp(new IPointerUpEvent(event));
         }
-        this.endDragSequence();
+        this._endDragSequence();
     };
     /**
      * Ends the drag sequence by resetting the state and removing event listeners.
@@ -9053,39 +9050,42 @@ class DragAndDropBase {
      * and resets the moveHandler to checkDragSequenceToStart.
      * It also removes all mouse and touch event listeners that were added during the drag sequence.
      */
-    endDragSequence() {
+    _endDragSequence() {
         this.isDragStarted = false;
-        this.pointerDownElement = null;
-        this.moveHandler = this.checkDragSequenceToStart;
-        this.mouseListeners();
-        this.mouseListeners = EventExtensions.emptyListener();
-        this.touchListeners();
-        this.touchListeners = EventExtensions.emptyListener();
+        this._pointerDownElement = null;
+        this._moveHandler = this._checkDragSequenceToStart;
+        this._mouseListeners();
+        this._mouseListeners = EventExtensions.emptyListener();
+        this._touchListeners();
+        this._touchListeners = EventExtensions.emptyListener();
         this.finalizeDragSequence();
     }
-    subscribe(fDocument) {
-        if (this.document) {
-            this.unsubscribe();
-        }
-        this.document = fDocument;
-        this.ngZone?.runOutsideAngular(() => {
-            fDocument.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
-            fDocument.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+    subscribe() {
+        this.unsubscribe();
+        this._ngZone?.runOutsideAngular(() => {
+            this._listen('mousedown', this._onMouseDown, EventExtensions.activeListener());
+            this._listen('touchstart', this._onTouchDown, EventExtensions.passiveListener());
         });
-        this.startListeners = () => {
-            fDocument.removeEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
-            fDocument.removeEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+        this._startListeners = () => {
+            this._unlisten('mousedown', this._onMouseDown, EventExtensions.activeListener());
+            this._unlisten('touchstart', this._onTouchDown, EventExtensions.passiveListener());
         };
     }
     unsubscribe() {
-        this.startListeners();
-        this.startListeners = EventExtensions.emptyListener();
-        this.touchListeners();
-        this.touchListeners = EventExtensions.emptyListener();
-        this.mouseListeners();
-        this.mouseListeners = EventExtensions.emptyListener();
-    }
-    onContextMenuDuringDrag = (e) => {
+        this._startListeners();
+        this._startListeners = EventExtensions.emptyListener();
+        this._touchListeners();
+        this._touchListeners = EventExtensions.emptyListener();
+        this._mouseListeners();
+        this._mouseListeners = EventExtensions.emptyListener();
+    }
+    _listen(type, listener, options) {
+        this._document.addEventListener(type, listener, options);
+    }
+    _unlisten(type, listener, options) {
+        this._document.removeEventListener(type, listener, options);
+    }
+    _preventDuringDrag = (e) => {
         if (this.isDragStarted) {
             e.preventDefault();
         }
@@ -9106,9 +9106,7 @@ function isFakeTouchstartFromScreenReader(event) {
 }
 
 class FDraggableBase extends DragAndDropBase {
-    constructor(ngZone) {
-        super(ngZone || undefined);
-    }
+    hostElement = inject(ElementRef).nativeElement;
 }
 
 const F_BEFORE_MAIN_PLUGIN = new InjectionToken('F_BEFORE_MAIN_PLUGIN');
@@ -9170,11 +9168,9 @@ function isDragBlocker(element) {
 // │   To Start                           │
 // └──────────────────────────────────────┘
 class FDraggableDirective extends FDraggableBase {
-    hostElement = inject(ElementRef).nativeElement;
     _result = inject(FDragHandlerResult);
     _mediator = inject(FMediator);
     _platform = inject(PlatformService);
-    _browser = inject(BrowserService);
     disabled = false;
     fMultiSelectTrigger = (event) => {
         return this._platform.getOS() === EOperationSystem.MAC_OS ? event.metaKey : event.ctrlKey;
@@ -9222,14 +9218,11 @@ class FDraggableDirective extends FDraggableBase {
     fDragEnded = new EventEmitter();
     _beforePlugins;
     _afterPlugins;
-    constructor() {
-        super(inject(NgZone, { optional: true }));
-    }
     ngOnInit() {
         this._mediator.execute(new AddDndToStoreRequest(this));
     }
     ngAfterViewInit() {
-        super.subscribe(this._browser.document);
+        super.subscribe();
     }
     onPointerDown(event) {
         if (isDragBlocker(event.targetElement)) {
@@ -9287,7 +9280,7 @@ class FDraggableDirective extends FDraggableBase {
         this._mediator.execute(new RemoveDndFromStoreRequest());
         super.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDraggableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "fDraggableDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fMultiSelectTrigger: { classPropertyName: "fMultiSelectTrigger", publicName: "fMultiSelectTrigger", isSignal: false, isRequired: false, transformFunction: null }, fReassignConnectionTrigger: { classPropertyName: "fReassignConnectionTrigger", publicName: "fReassignConnectionTrigger", isSignal: false, isRequired: false, transformFunction: null }, fCreateConnectionTrigger: { classPropertyName: "fCreateConnectionTrigger", publicName: "fCreateConnectionTrigger", isSignal: false, isRequired: false, transformFunction: null }, fNodeResizeTrigger: { classPropertyName: "fNodeResizeTrigger", publicName: "fNodeResizeTrigger", isSignal: false, isRequired: false, transformFunction: null }, fNodeRotateTrigger: { classPropertyName: "fNodeRotateTrigger", publicName: "fNodeRotateTrigger", isSignal: false, isRequired: false, transformFunction: null }, fNodeMoveTrigger: { classPropertyName: "fNodeMoveTrigger", publicName: "fNodeMoveTrigger", isSignal: false, isRequired: false, transformFunction: null }, fCanvasMoveTrigger: { classPropertyName: "fCanvasMoveTrigger", publicName: "fCanvasMoveTrigger", isSignal: false, isRequired: false, transformFunction: null }, fExternalItemTrigger: { classPropertyName: "fExternalItemTrigger", publicName: "fExternalItemTrigger", isSignal: false, isRequired: false, transformFunction: null }, fEmitOnNodeIntersect: { classPropertyName: "fEmitOnNodeIntersect", publicName: "fEmitOnNodeIntersect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, vCellSize: { classPropertyName: "vCellSize", publicName: "vCellSize", isSignal: true, isRequired: false, transformFunction: null }, hCellSize: { classPropertyName: "hCellSize", publicName: "hCellSize", isSignal: true, isRequired: false, transformFunction: null }, fCellSizeWhileDragging: { classPropertyName: "fCellSizeWhileDragging", publicName: "fCellSizeWhileDragging", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fSelectionChange: "fSelectionChange", fNodeIntersectedWithConnections: "fNodeIntersectedWithConnections", fCreateNode: "fCreateNode", fMoveNodes: "fMoveNodes", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection", fDropToGroup: "fDropToGroup", fDragStarted: "fDragStarted", fDragEnded: "fDragEnded" }, providers: [FDragHandlerResult], queries: [{ propertyName: "_beforePlugins", predicate: F_BEFORE_MAIN_PLUGIN, descendants: true }, { propertyName: "_afterPlugins", predicate: F_AFTER_MAIN_PLUGIN, descendants: true }], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDraggableDirective, decorators: [{
@@ -9297,7 +9290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     exportAs: 'fDraggable',
                     providers: [FDragHandlerResult],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
+        }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute, alias: 'fDraggableDisabled' }]
             }], fMultiSelectTrigger: [{
@@ -12536,7 +12529,7 @@ class FCanvasComponent extends FCanvasBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCanvasComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: FCanvasComponent, isStandalone: true, selector: "f-canvas", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
             { provide: F_CANVAS, useExisting: FCanvasComponent },
-        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.canvas-dragging{will-change:transform;transform:translateZ(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     Deprecated('setScale')
@@ -12550,7 +12543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         'class': 'f-component f-canvas',
                     }, providers: [
                         { provide: F_CANVAS, useExisting: FCanvasComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.canvas-dragging{will-change:transform;transform:translateZ(0)}\n"] }]
         }], propDecorators: { setZoom: [], resetZoom: [] } });
 
 const F_CANVAS_PROVIDERS = [
@@ -12787,7 +12780,7 @@ class FFlowComponent extends FFlowBase {
             ...COMMON_PROVIDERS,
             ...F_DRAGGABLE_PROVIDERS,
             { provide: F_FLOW, useExisting: FFlowComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}::ng-deep .f-connection-content{position:fixed;left:0;top:0;pointer-events:all;transform-origin:50% 50%;will-change:transform}::ng-deep .f-node,::ng-deep .f-group{position:absolute!important;transform-origin:center;-webkit-user-select:none;user-select:none;pointer-events:all;left:0!important;top:0!important}::ng-deep .f-dragging .f-canvas{will-change:transform;transform:translateZ(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}::ng-deep .f-connection-content{position:absolute;left:0;top:0;pointer-events:all;transform-origin:50% 50%;will-change:transform}::ng-deep .f-node,::ng-deep .f-group{position:absolute!important;transform-origin:center;-webkit-user-select:none;user-select:none;pointer-events:all;left:0!important;top:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FFlowComponent, decorators: [{
             type: Component,
@@ -12802,7 +12795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ...COMMON_PROVIDERS,
                         ...F_DRAGGABLE_PROVIDERS,
                         { provide: F_FLOW, useExisting: FFlowComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}::ng-deep .f-connection-content{position:fixed;left:0;top:0;pointer-events:all;transform-origin:50% 50%;will-change:transform}::ng-deep .f-node,::ng-deep .f-group{position:absolute!important;transform-origin:center;-webkit-user-select:none;user-select:none;pointer-events:all;left:0!important;top:0!important}::ng-deep .f-dragging .f-canvas{will-change:transform;transform:translateZ(0)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}::ng-deep .f-connection-content{position:absolute;left:0;top:0;pointer-events:all;transform-origin:50% 50%;will-change:transform}::ng-deep .f-node,::ng-deep .f-group{position:absolute!important;transform-origin:center;-webkit-user-select:none;user-select:none;pointer-events:all;left:0!important;top:0!important}\n"] }]
         }] });
 
 const F_FLOW_PROVIDERS = [