@foblex/flow 12.5.1 → 12.6.0

package/esm2022/f-selection-area/domain/selection-area.drag-handle.mjs

@@ -0,0 +1,52 @@
+import { Point, RectExtensions } from '@foblex/core';
+import { EmitTransformChangesRequest } from '../../domain';
+import { GetCanBeSelectedItemsRequest } from '../../domain/get-can-be-selected-items/get-can-be-selected-items-request';
+export class SelectionAreaDragHandle {
+    fComponentsStore;
+    fSelectionArea;
+    fDraggableDataContext;
+    fMediator;
+    canBeSelected = [];
+    selectedByMove = [];
+    get canvasPosition() {
+        return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
+    }
+    constructor(fComponentsStore, fSelectionArea, fDraggableDataContext, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fSelectionArea = fSelectionArea;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
+    }
+    initialize() {
+        this.canBeSelected = this.fMediator.send(new GetCanBeSelectedItemsRequest());
+        this.fSelectionArea.show();
+        this.fSelectionArea.draw(RectExtensions.initialize(this.fDraggableDataContext.onPointerDownPosition.x, this.fDraggableDataContext.onPointerDownPosition.y));
+    }
+    move(difference) {
+        const currentPoint = Point.fromPoint(difference).add(this.fDraggableDataContext.onPointerDownPosition);
+        const x = Math.min(this.fDraggableDataContext.onPointerDownPosition.x, currentPoint.x);
+        const y = Math.min(this.fDraggableDataContext.onPointerDownPosition.y, currentPoint.y);
+        const width = Math.abs(difference.x);
+        const height = Math.abs(difference.y);
+        this.fSelectionArea.draw(RectExtensions.initialize(x, y, width, height));
+        this.selectedByMove = [];
+        this.canBeSelected.forEach((item) => {
+            item.element.deselect();
+            const itemRect = RectExtensions.addPoint(item.rect, this.canvasPosition);
+            const isIntersect = RectExtensions.intersectionWithRect(itemRect, RectExtensions.initialize(x, y, width, height));
+            if (isIntersect) {
+                item.element.select();
+                this.selectedByMove.push(item.element);
+            }
+        });
+        this.fMediator.send(new EmitTransformChangesRequest());
+    }
+    complete() {
+        this.fSelectionArea.hide();
+        this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
+        if (this.selectedByMove.length > 0) {
+            this.fDraggableDataContext.isSelectedChanged = true;
+        }
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLWFyZWEuZHJhZy1oYW5kbGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9mLWZsb3cvc3JjL2Ytc2VsZWN0aW9uLWFyZWEvZG9tYWluL3NlbGVjdGlvbi1hcmVhLmRyYWctaGFuZGxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBVSxLQUFLLEVBQUUsY0FBYyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBRTdELE9BQU8sRUFBRSwyQkFBMkIsRUFBdUIsTUFBTSxjQUFjLENBQUM7QUFHaEYsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sMEVBQTBFLENBQUM7QUFJeEgsTUFBTSxPQUFPLHVCQUF1QjtJQVd4QjtJQUNBO0lBQ0E7SUFDQTtJQVpGLGFBQWEsR0FBMEIsRUFBRSxDQUFDO0lBRTFDLGNBQWMsR0FBa0IsRUFBRSxDQUFDO0lBRTNDLElBQVksY0FBYztRQUN4QixPQUFPLEtBQUssQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLE9BQVEsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFRLENBQUMsU0FBUyxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQ3pJLENBQUM7SUFFRCxZQUNVLGdCQUFrQyxFQUNsQyxjQUFrQyxFQUNsQyxxQkFBNEMsRUFDNUMsU0FBd0I7UUFIeEIscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUNsQyxtQkFBYyxHQUFkLGNBQWMsQ0FBb0I7UUFDbEMsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUF1QjtRQUM1QyxjQUFTLEdBQVQsU0FBUyxDQUFlO0lBRWxDLENBQUM7SUFFTSxVQUFVO1FBQ2YsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLDRCQUE0QixFQUFFLENBQUMsQ0FBQztRQUU3RSxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzNCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUN0QixjQUFjLENBQUMsVUFBVSxDQUN2QixJQUFJLENBQUMscUJBQXFCLENBQUMscUJBQXFCLENBQUMsQ0FBQyxFQUNsRCxJQUFJLENBQUMscUJBQXFCLENBQUMscUJBQXFCLENBQUMsQ0FBQyxDQUNuRCxDQUNGLENBQUM7SUFDSixDQUFDO0lBRU0sSUFBSSxDQUFDLFVBQWtCO1FBQzVCLE1BQU0sWUFBWSxHQUFHLEtBQUssQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBQ3ZHLE1BQU0sQ0FBQyxHQUFXLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLHFCQUFxQixDQUFDLENBQUMsRUFBRSxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDL0YsTUFBTSxDQUFDLEdBQVcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMscUJBQXFCLENBQUMsQ0FBQyxFQUFFLFlBQVksQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUUvRixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNyQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUV0QyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FDdEIsY0FBYyxDQUFDLFVBQVUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsQ0FDL0MsQ0FBQztRQUNGLElBQUksQ0FBQyxjQUFjLEdBQUcsRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDbEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUV4QixNQUFNLFFBQVEsR0FBRyxjQUFjLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1lBRXpFLE1BQU0sV0FBVyxHQUFHLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxRQUFRLEVBQUUsY0FBYyxDQUFDLFVBQVUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDO1lBQ2xILElBQUksV0FBVyxFQUFFLENBQUM7Z0JBRWhCLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLENBQUM7Z0JBQ3RCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUN6QyxDQUFDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBTyxJQUFJLDJCQUEyQixFQUFFLENBQUMsQ0FBQztJQUMvRCxDQUFDO0lBRU0sUUFBUTtRQUNiLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDM0IsSUFBSSxDQUFDLHFCQUFxQixDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDdEUsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMscUJBQXFCLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxDQUFDO1FBQ3RELENBQUM7SUFDSCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJUG9pbnQsIFBvaW50LCBSZWN0RXh0ZW5zaW9ucyB9IGZyb20gJ0Bmb2JsZXgvY29yZSc7XG5pbXBvcnQgeyBGQ29tcG9uZW50c1N0b3JlIH0gZnJvbSAnLi4vLi4vZi1zdG9yYWdlJztcbmltcG9ydCB7IEVtaXRUcmFuc2Zvcm1DaGFuZ2VzUmVxdWVzdCwgSVNlbGVjdGFibGVXaXRoUmVjdCB9IGZyb20gJy4uLy4uL2RvbWFpbic7XG5pbXBvcnQgeyBJU2VsZWN0YWJsZSB9IGZyb20gJy4uLy4uL2YtY29ubmVjdGlvbic7XG5pbXBvcnQgeyBGRmxvd01lZGlhdG9yIH0gZnJvbSAnLi4vLi4vaW5mcmFzdHJ1Y3R1cmUnO1xuaW1wb3J0IHsgR2V0Q2FuQmVTZWxlY3RlZEl0ZW1zUmVxdWVzdCB9IGZyb20gJy4uLy4uL2RvbWFpbi9nZXQtY2FuLWJlLXNlbGVjdGVkLWl0ZW1zL2dldC1jYW4tYmUtc2VsZWN0ZWQtaXRlbXMtcmVxdWVzdCc7XG5pbXBvcnQgeyBGRHJhZ2dhYmxlRGF0YUNvbnRleHQsIElEcmFnZ2FibGVJdGVtIH0gZnJvbSAnLi4vLi4vZi1kcmFnZ2FibGUnO1xuaW1wb3J0IHsgRlNlbGVjdGlvbkFyZWFCYXNlIH0gZnJvbSAnLi4vZi1zZWxlY3Rpb24tYXJlYS1iYXNlJztcblxuZXhwb3J0IGNsYXNzIFNlbGVjdGlvbkFyZWFEcmFnSGFuZGxlIGltcGxlbWVudHMgSURyYWdnYWJsZUl0ZW0ge1xuXG4gIHByaXZhdGUgY2FuQmVTZWxlY3RlZDogSVNlbGVjdGFibGVXaXRoUmVjdFtdID0gW107XG5cbiAgcHJpdmF0ZSBzZWxlY3RlZEJ5TW92ZTogSVNlbGVjdGFibGVbXSA9IFtdO1xuXG4gIHByaXZhdGUgZ2V0IGNhbnZhc1Bvc2l0aW9uKCk6IFBvaW50IHtcbiAgICByZXR1cm4gUG9pbnQuZnJvbVBvaW50KHRoaXMuZkNvbXBvbmVudHNTdG9yZS5mQ2FudmFzIS50cmFuc2Zvcm0ucG9zaXRpb24pLmFkZCh0aGlzLmZDb21wb25lbnRzU3RvcmUuZkNhbnZhcyEudHJhbnNmb3JtLnNjYWxlZFBvc2l0aW9uKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZkNvbXBvbmVudHNTdG9yZTogRkNvbXBvbmVudHNTdG9yZSxcbiAgICBwcml2YXRlIGZTZWxlY3Rpb25BcmVhOiBGU2VsZWN0aW9uQXJlYUJhc2UsXG4gICAgcHJpdmF0ZSBmRHJhZ2dhYmxlRGF0YUNvbnRleHQ6IEZEcmFnZ2FibGVEYXRhQ29udGV4dCxcbiAgICBwcml2YXRlIGZNZWRpYXRvcjogRkZsb3dNZWRpYXRvcixcbiAgKSB7XG4gIH1cblxuICBwdWJsaWMgaW5pdGlhbGl6ZSgpOiB2b2lkIHtcbiAgICB0aGlzLmNhbkJlU2VsZWN0ZWQgPSB0aGlzLmZNZWRpYXRvci5zZW5kKG5ldyBHZXRDYW5CZVNlbGVjdGVkSXRlbXNSZXF1ZXN0KCkpO1xuXG4gICAgdGhpcy5mU2VsZWN0aW9uQXJlYS5zaG93KCk7XG4gICAgdGhpcy5mU2VsZWN0aW9uQXJlYS5kcmF3KFxuICAgICAgUmVjdEV4dGVuc2lvbnMuaW5pdGlhbGl6ZShcbiAgICAgICAgdGhpcy5mRHJhZ2dhYmxlRGF0YUNvbnRleHQub25Qb2ludGVyRG93blBvc2l0aW9uLngsXG4gICAgICAgIHRoaXMuZkRyYWdnYWJsZURhdGFDb250ZXh0Lm9uUG9pbnRlckRvd25Qb3NpdGlvbi55XG4gICAgICApXG4gICAgKTtcbiAgfVxuXG4gIHB1YmxpYyBtb3ZlKGRpZmZlcmVuY2U6IElQb2ludCk6IHZvaWQge1xuICAgIGNvbnN0IGN1cnJlbnRQb2ludCA9IFBvaW50LmZyb21Qb2ludChkaWZmZXJlbmNlKS5hZGQodGhpcy5mRHJhZ2dhYmxlRGF0YUNvbnRleHQub25Qb2ludGVyRG93blBvc2l0aW9uKTtcbiAgICBjb25zdCB4OiBudW1iZXIgPSBNYXRoLm1pbih0aGlzLmZEcmFnZ2FibGVEYXRhQ29udGV4dC5vblBvaW50ZXJEb3duUG9zaXRpb24ueCwgY3VycmVudFBvaW50LngpO1xuICAgIGNvbnN0IHk6IG51bWJlciA9IE1hdGgubWluKHRoaXMuZkRyYWdnYWJsZURhdGFDb250ZXh0Lm9uUG9pbnRlckRvd25Qb3NpdGlvbi55LCBjdXJyZW50UG9pbnQueSk7XG5cbiAgICBjb25zdCB3aWR0aCA9IE1hdGguYWJzKGRpZmZlcmVuY2UueCk7XG4gICAgY29uc3QgaGVpZ2h0ID0gTWF0aC5hYnMoZGlmZmVyZW5jZS55KTtcblxuICAgIHRoaXMuZlNlbGVjdGlvbkFyZWEuZHJhdyhcbiAgICAgIFJlY3RFeHRlbnNpb25zLmluaXRpYWxpemUoeCwgeSwgd2lkdGgsIGhlaWdodClcbiAgICApO1xuICAgIHRoaXMuc2VsZWN0ZWRCeU1vdmUgPSBbXTtcbiAgICB0aGlzLmNhbkJlU2VsZWN0ZWQuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgICAgaXRlbS5lbGVtZW50LmRlc2VsZWN0KCk7XG5cbiAgICAgIGNvbnN0IGl0ZW1SZWN0ID0gUmVjdEV4dGVuc2lvbnMuYWRkUG9pbnQoaXRlbS5yZWN0LCB0aGlzLmNhbnZhc1Bvc2l0aW9uKTtcblxuICAgICAgY29uc3QgaXNJbnRlcnNlY3QgPSBSZWN0RXh0ZW5zaW9ucy5pbnRlcnNlY3Rpb25XaXRoUmVjdChpdGVtUmVjdCwgUmVjdEV4dGVuc2lvbnMuaW5pdGlhbGl6ZSh4LCB5LCB3aWR0aCwgaGVpZ2h0KSk7XG4gICAgICBpZiAoaXNJbnRlcnNlY3QpIHtcblxuICAgICAgICBpdGVtLmVsZW1lbnQuc2VsZWN0KCk7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRCeU1vdmUucHVzaChpdGVtLmVsZW1lbnQpO1xuICAgICAgfVxuICAgIH0pO1xuICAgIHRoaXMuZk1lZGlhdG9yLnNlbmQ8dm9pZD4obmV3IEVtaXRUcmFuc2Zvcm1DaGFuZ2VzUmVxdWVzdCgpKTtcbiAgfVxuXG4gIHB1YmxpYyBjb21wbGV0ZSgpOiB2b2lkIHtcbiAgICB0aGlzLmZTZWxlY3Rpb25BcmVhLmhpZGUoKTtcbiAgICB0aGlzLmZEcmFnZ2FibGVEYXRhQ29udGV4dC5zZWxlY3RlZEl0ZW1zLnB1c2goLi4udGhpcy5zZWxlY3RlZEJ5TW92ZSk7XG4gICAgaWYgKHRoaXMuc2VsZWN0ZWRCeU1vdmUubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy5mRHJhZ2dhYmxlRGF0YUNvbnRleHQuaXNTZWxlY3RlZENoYW5nZWQgPSB0cnVlO1xuICAgIH1cbiAgfVxufVxuIl19

package/esm2022/f-selection-area/f-selection-area-base.mjs

@@ -1,6 +1,5 @@
-import { Directive, InjectionToken } from '@angular/core';
+import { Directive } from '@angular/core';
 import * as i0 from "@angular/core";
-export const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
 export class FSelectionAreaBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FSelectionAreaBase, ngImport: i0 });
@@ -8,4 +7,4 @@ export class FSelectionAreaBase {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaBase, decorators: [{
             type: Directive
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1zZWxlY3Rpb24tYXJlYS1iYXNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZi1mbG93L3NyYy9mLXNlbGVjdGlvbi1hcmVhL2Ytc2VsZWN0aW9uLWFyZWEtYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGNBQWMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFHMUQsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxjQUFjLENBQXFCLGtCQUFrQixDQUFDLENBQUM7QUFHM0YsTUFBTSxPQUFnQixrQkFBa0I7dUdBQWxCLGtCQUFrQjsyRkFBbEIsa0JBQWtCOzsyRkFBbEIsa0JBQWtCO2tCQUR2QyxTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSUhhc0hvc3RFbGVtZW50IH0gZnJvbSAnQGZvYmxleC9jb3JlJztcbmltcG9ydCB7IERpcmVjdGl2ZSwgSW5qZWN0aW9uVG9rZW4gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElTZWxlY3Rpb25BcmVhUmVjdCB9IGZyb20gJy4vZG9tYWluJztcblxuZXhwb3J0IGNvbnN0IEZfU0VMRUNUSU9OX0FSRUEgPSBuZXcgSW5qZWN0aW9uVG9rZW48RlNlbGVjdGlvbkFyZWFCYXNlPignRl9TRUxFQ1RJT05fQVJFQScpO1xuXG5ARGlyZWN0aXZlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBGU2VsZWN0aW9uQXJlYUJhc2UgaW1wbGVtZW50cyBJSGFzSG9zdEVsZW1lbnQge1xuXG4gIHB1YmxpYyBhYnN0cmFjdCBob3N0RWxlbWVudDogSFRNTEVsZW1lbnQgfCBTVkdFbGVtZW50O1xuXG4gIHB1YmxpYyBhYnN0cmFjdCBoaWRlKCk6IHZvaWQ7XG5cbiAgcHVibGljIGFic3RyYWN0IHNob3coKTogdm9pZDtcblxuICBwdWJsaWMgYWJzdHJhY3QgZHJhdyhvYmplY3Q6IElTZWxlY3Rpb25BcmVhUmVjdCk6IHZvaWQ7XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1zZWxlY3Rpb24tYXJlYS1iYXNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZi1mbG93L3NyYy9mLXNlbGVjdGlvbi1hcmVhL2Ytc2VsZWN0aW9uLWFyZWEtYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUcxQyxNQUFNLE9BQWdCLGtCQUFrQjt1R0FBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7OzJGQUFsQixrQkFBa0I7a0JBRHZDLFNBQVMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJSGFzSG9zdEVsZW1lbnQsIElSZWN0IH0gZnJvbSAnQGZvYmxleC9jb3JlJztcbmltcG9ydCB7IERpcmVjdGl2ZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBGU2VsZWN0aW9uQXJlYUJhc2UgaW1wbGVtZW50cyBJSGFzSG9zdEVsZW1lbnQge1xuXG4gIHB1YmxpYyBhYnN0cmFjdCBob3N0RWxlbWVudDogSFRNTEVsZW1lbnQgfCBTVkdFbGVtZW50O1xuXG4gIHB1YmxpYyBhYnN0cmFjdCBoaWRlKCk6IHZvaWQ7XG5cbiAgcHVibGljIGFic3RyYWN0IHNob3coKTogdm9pZDtcblxuICBwdWJsaWMgYWJzdHJhY3QgZHJhdyhvYmplY3Q6IElSZWN0KTogdm9pZDtcbn1cbiJdfQ==

package/esm2022/f-selection-area/f-selection-area.component.mjs

@@ -1,20 +1,21 @@
 import { Component } from '@angular/core';
-import { F_SELECTION_AREA, FSelectionAreaBase } from './f-selection-area-base';
+import { FSelectionAreaBase } from './f-selection-area-base';
+import { F_DRAG_AND_DROP_PLUGIN } from '../f-draggable';
+import { SelectionAreaFinalizeRequest, SelectionAreaPreparationRequest } from './domain';
 import * as i0 from "@angular/core";
-import * as i1 from "../f-draggable";
+import * as i1 from "../infrastructure";
 export class FSelectionAreaComponent extends FSelectionAreaBase {
     elementReference;
-    fDraggableDataContext;
+    fMediator;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fDraggableDataContext) {
+    constructor(elementReference, fMediator) {
         super();
         this.elementReference = elementReference;
-        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
     }
     ngOnInit() {
-        this.fDraggableDataContext.fSelectionArea = this;
         this.hostElement.style.display = 'none';
     }
     hide() {
@@ -25,14 +26,20 @@ export class FSelectionAreaComponent extends FSelectionAreaBase {
     }
     draw(object) {
         const style = this.hostElement.style;
-        style.left = object.left + 'px';
-        style.top = object.top + 'px';
+        style.left = object.x + 'px';
+        style.top = object.y + 'px';
         style.width = object.width + 'px';
         style.height = object.height + 'px';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: i1.FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component });
+    onPointerDown(event) {
+        this.fMediator.send(new SelectionAreaPreparationRequest(event, this));
+    }
+    onPointerUp(event) {
+        this.fMediator.send(new SelectionAreaFinalizeRequest(event));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: i1.FFlowMediator }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
-            { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+            { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
@@ -40,7 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{ selector: "f-selection-area", template: ``, host: {
                         'class': 'f-selection-area f-component'
                     }, providers: [
-                        { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
                     ], styles: [":host{position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FDraggableDataContext }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1zZWxlY3Rpb24tYXJlYS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9mLWZsb3cvc3JjL2Ytc2VsZWN0aW9uLWFyZWEvZi1zZWxlY3Rpb24tYXJlYS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBc0IsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUM7OztBQWUvRSxNQUFNLE9BQU8sdUJBQXdCLFNBQVEsa0JBQWtCO0lBT2pEO0lBQ0E7SUFOWixJQUFvQixXQUFXO1FBQzdCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLGFBQWEsQ0FBQztJQUM3QyxDQUFDO0lBRUQsWUFDWSxnQkFBeUMsRUFDekMscUJBQTRDO1FBRXRELEtBQUssRUFBRSxDQUFDO1FBSEUscUJBQWdCLEdBQWhCLGdCQUFnQixDQUF5QjtRQUN6QywwQkFBcUIsR0FBckIscUJBQXFCLENBQXVCO0lBR3hELENBQUM7SUFFTSxRQUFRO1FBQ2IsSUFBSSxDQUFDLHFCQUFxQixDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7UUFDakQsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztJQUMxQyxDQUFDO0lBRWUsSUFBSTtRQUNsQixJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO0lBQzFDLENBQUM7SUFFZSxJQUFJO1FBQ2xCLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7SUFDM0MsQ0FBQztJQUVlLElBQUksQ0FBQyxNQUEwQjtRQUM3QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQztRQUNyQyxLQUFLLENBQUMsSUFBSSxHQUFHLE1BQU0sQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1FBQ2hDLEtBQUssQ0FBQyxHQUFHLEdBQUcsTUFBTSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUM7UUFDOUIsS0FBSyxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztRQUNsQyxLQUFLLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO0lBQ3RDLENBQUM7dUdBaENVLHVCQUF1QjsyRkFBdkIsdUJBQXVCLHFHQUp2QjtZQUNULEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSx1QkFBdUIsRUFBRTtTQUNwRSxpREFQUyxFQUFFOzsyRkFTRCx1QkFBdUI7a0JBWG5DLFNBQVM7K0JBQ0Usa0JBQWtCLFlBQ2xCLEVBQUUsUUFFTjt3QkFDSixPQUFPLEVBQUUsOEJBQThCO3FCQUN4QyxhQUNVO3dCQUNULEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcseUJBQXlCLEVBQUU7cUJBQ3BFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZfU0VMRUNUSU9OX0FSRUEsIEZTZWxlY3Rpb25BcmVhQmFzZSB9IGZyb20gJy4vZi1zZWxlY3Rpb24tYXJlYS1iYXNlJztcbmltcG9ydCB7IElTZWxlY3Rpb25BcmVhUmVjdCB9IGZyb20gJy4vZG9tYWluJztcbmltcG9ydCB7IEZEcmFnZ2FibGVEYXRhQ29udGV4dCB9IGZyb20gJy4uL2YtZHJhZ2dhYmxlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImYtc2VsZWN0aW9uLWFyZWFcIixcbiAgdGVtcGxhdGU6IGBgLFxuICBzdHlsZVVybHM6IFsgJy4vZi1zZWxlY3Rpb24tYXJlYS5jb21wb25lbnQuc2NzcycgXSxcbiAgaG9zdDoge1xuICAgICdjbGFzcyc6ICdmLXNlbGVjdGlvbi1hcmVhIGYtY29tcG9uZW50J1xuICB9LFxuICBwcm92aWRlcnM6IFtcbiAgICB7IHByb3ZpZGU6IEZfU0VMRUNUSU9OX0FSRUEsIHVzZUV4aXN0aW5nOiBGU2VsZWN0aW9uQXJlYUNvbXBvbmVudCB9XG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEZTZWxlY3Rpb25BcmVhQ29tcG9uZW50IGV4dGVuZHMgRlNlbGVjdGlvbkFyZWFCYXNlIGltcGxlbWVudHMgT25Jbml0IHtcblxuICBwdWJsaWMgb3ZlcnJpZGUgZ2V0IGhvc3RFbGVtZW50KCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5lbGVtZW50UmVmZXJlbmNlLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICAgIHByaXZhdGUgZWxlbWVudFJlZmVyZW5jZTogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICAgICBwcml2YXRlIGZEcmFnZ2FibGVEYXRhQ29udGV4dDogRkRyYWdnYWJsZURhdGFDb250ZXh0XG4gICkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5mRHJhZ2dhYmxlRGF0YUNvbnRleHQuZlNlbGVjdGlvbkFyZWEgPSB0aGlzO1xuICAgIHRoaXMuaG9zdEVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdub25lJztcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBoaWRlKCk6IHZvaWQge1xuICAgIHRoaXMuaG9zdEVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdub25lJztcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBzaG93KCk6IHZvaWQge1xuICAgIHRoaXMuaG9zdEVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgZHJhdyhvYmplY3Q6IElTZWxlY3Rpb25BcmVhUmVjdCk6IHZvaWQge1xuICAgIGNvbnN0IHN0eWxlID0gdGhpcy5ob3N0RWxlbWVudC5zdHlsZTtcbiAgICBzdHlsZS5sZWZ0ID0gb2JqZWN0LmxlZnQgKyAncHgnO1xuICAgIHN0eWxlLnRvcCA9IG9iamVjdC50b3AgKyAncHgnO1xuICAgIHN0eWxlLndpZHRoID0gb2JqZWN0LndpZHRoICsgJ3B4JztcbiAgICBzdHlsZS5oZWlnaHQgPSBvYmplY3QuaGVpZ2h0ICsgJ3B4JztcbiAgfVxufVxuIl19
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FFlowMediator }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1zZWxlY3Rpb24tYXJlYS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9mLWZsb3cvc3JjL2Ytc2VsZWN0aW9uLWFyZWEvZi1zZWxlY3Rpb24tYXJlYS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBc0IsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDN0QsT0FBTyxFQUFFLHNCQUFzQixFQUF1QixNQUFNLGdCQUFnQixDQUFDO0FBRzdFLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSwrQkFBK0IsRUFBRSxNQUFNLFVBQVUsQ0FBQzs7O0FBYXpGLE1BQU0sT0FBTyx1QkFBd0IsU0FBUSxrQkFBa0I7SUFPakQ7SUFDQTtJQU5aLElBQW9CLFdBQVc7UUFDN0IsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDO0lBQzdDLENBQUM7SUFFRCxZQUNZLGdCQUF5QyxFQUN6QyxTQUF3QjtRQUVsQyxLQUFLLEVBQUUsQ0FBQztRQUhFLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBeUI7UUFDekMsY0FBUyxHQUFULFNBQVMsQ0FBZTtJQUdwQyxDQUFDO0lBRU0sUUFBUTtRQUNiLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7SUFDMUMsQ0FBQztJQUVlLElBQUk7UUFDbEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztJQUMxQyxDQUFDO0lBRWUsSUFBSTtRQUNsQixJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO0lBQzNDLENBQUM7SUFFZSxJQUFJLENBQUMsTUFBYTtRQUNoQyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQztRQUNyQyxLQUFLLENBQUMsSUFBSSxHQUFHLE1BQU0sQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQzdCLEtBQUssQ0FBQyxHQUFHLEdBQUcsTUFBTSxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUM7UUFDNUIsS0FBSyxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztRQUNsQyxLQUFLLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO0lBQ3RDLENBQUM7SUFFTSxhQUFhLENBQUMsS0FBb0I7UUFDdkMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUN4RSxDQUFDO0lBRU0sV0FBVyxDQUFDLEtBQW9CO1FBQ3JDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksNEJBQTRCLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUMvRCxDQUFDO3VHQXZDVSx1QkFBdUI7MkZBQXZCLHVCQUF1QixxR0FKdkI7WUFDVCxFQUFFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxXQUFXLEVBQUUsdUJBQXVCLEVBQUU7U0FDMUUsaURBUFMsRUFBRTs7MkZBU0QsdUJBQXVCO2tCQVhuQyxTQUFTOytCQUNFLGtCQUFrQixZQUNsQixFQUFFLFFBRU47d0JBQ0osT0FBTyxFQUFFLDhCQUE4QjtxQkFDeEMsYUFDVTt3QkFDVCxFQUFFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxXQUFXLHlCQUF5QixFQUFFO3FCQUMxRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGU2VsZWN0aW9uQXJlYUJhc2UgfSBmcm9tICcuL2Ytc2VsZWN0aW9uLWFyZWEtYmFzZSc7XG5pbXBvcnQgeyBGX0RSQUdfQU5EX0RST1BfUExVR0lOLCBJRkRyYWdBbmREcm9wUGx1Z2luIH0gZnJvbSAnLi4vZi1kcmFnZ2FibGUnO1xuaW1wb3J0IHsgSVBvaW50ZXJFdmVudCwgSVJlY3QgfSBmcm9tICdAZm9ibGV4L2NvcmUnO1xuaW1wb3J0IHsgRkZsb3dNZWRpYXRvciB9IGZyb20gJy4uL2luZnJhc3RydWN0dXJlJztcbmltcG9ydCB7IFNlbGVjdGlvbkFyZWFGaW5hbGl6ZVJlcXVlc3QsIFNlbGVjdGlvbkFyZWFQcmVwYXJhdGlvblJlcXVlc3QgfSBmcm9tICcuL2RvbWFpbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJmLXNlbGVjdGlvbi1hcmVhXCIsXG4gIHRlbXBsYXRlOiBgYCxcbiAgc3R5bGVVcmxzOiBbICcuL2Ytc2VsZWN0aW9uLWFyZWEuY29tcG9uZW50LnNjc3MnIF0sXG4gIGhvc3Q6IHtcbiAgICAnY2xhc3MnOiAnZi1zZWxlY3Rpb24tYXJlYSBmLWNvbXBvbmVudCdcbiAgfSxcbiAgcHJvdmlkZXJzOiBbXG4gICAgeyBwcm92aWRlOiBGX0RSQUdfQU5EX0RST1BfUExVR0lOLCB1c2VFeGlzdGluZzogRlNlbGVjdGlvbkFyZWFDb21wb25lbnQgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRlNlbGVjdGlvbkFyZWFDb21wb25lbnQgZXh0ZW5kcyBGU2VsZWN0aW9uQXJlYUJhc2UgaW1wbGVtZW50cyBPbkluaXQsIElGRHJhZ0FuZERyb3BQbHVnaW4gIHtcblxuICBwdWJsaWMgb3ZlcnJpZGUgZ2V0IGhvc3RFbGVtZW50KCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5lbGVtZW50UmVmZXJlbmNlLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICAgIHByaXZhdGUgZWxlbWVudFJlZmVyZW5jZTogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICAgICBwcml2YXRlIGZNZWRpYXRvcjogRkZsb3dNZWRpYXRvclxuICApIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaG9zdEVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdub25lJztcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBoaWRlKCk6IHZvaWQge1xuICAgIHRoaXMuaG9zdEVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdub25lJztcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBzaG93KCk6IHZvaWQge1xuICAgIHRoaXMuaG9zdEVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgZHJhdyhvYmplY3Q6IElSZWN0KTogdm9pZCB7XG4gICAgY29uc3Qgc3R5bGUgPSB0aGlzLmhvc3RFbGVtZW50LnN0eWxlO1xuICAgIHN0eWxlLmxlZnQgPSBvYmplY3QueCArICdweCc7XG4gICAgc3R5bGUudG9wID0gb2JqZWN0LnkgKyAncHgnO1xuICAgIHN0eWxlLndpZHRoID0gb2JqZWN0LndpZHRoICsgJ3B4JztcbiAgICBzdHlsZS5oZWlnaHQgPSBvYmplY3QuaGVpZ2h0ICsgJ3B4JztcbiAgfVxuXG4gIHB1YmxpYyBvblBvaW50ZXJEb3duKGV2ZW50OiBJUG9pbnRlckV2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5mTWVkaWF0b3Iuc2VuZChuZXcgU2VsZWN0aW9uQXJlYVByZXBhcmF0aW9uUmVxdWVzdChldmVudCwgdGhpcykpO1xuICB9XG5cbiAgcHVibGljIG9uUG9pbnRlclVwKGV2ZW50OiBJUG9pbnRlckV2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5mTWVkaWF0b3Iuc2VuZChuZXcgU2VsZWN0aW9uQXJlYUZpbmFsaXplUmVxdWVzdChldmVudCkpO1xuICB9XG59XG4iXX0=

package/esm2022/f-storage/f-components-store.mjs

@@ -2,7 +2,14 @@ import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export class FComponentsStore {
-    changes = new Subject();
+    componentsDataChanges = new Subject();
+    get componentsData$() {
+        return this.componentsDataChanges.asObservable();
+    }
+    componentsCountChanges = new Subject();
+    get componentsCount$() {
+        return this.componentsCountChanges.asObservable();
+    }
     get flowHost() {
         return this.fFlow?.hostElement;
     }
@@ -25,19 +32,22 @@ export class FComponentsStore {
     }
     addComponent(collection, component) {
         collection.push(component);
-        this.changes.next();
+        this.componentsCountChanges.next();
     }
     removeComponent(collection, component) {
         const index = collection.indexOf(component);
         if (index > -1) {
             collection.splice(index, 1);
-            this.changes.next();
+            this.componentsCountChanges.next();
         }
     }
+    componentDataChanged() {
+        this.componentsDataChanges.next();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FComponentsStore });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FComponentsStore, decorators: [{
             type: Injectable
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1jb21wb25lbnRzLXN0b3JlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZi1mbG93L3NyYy9mLXN0b3JhZ2UvZi1jb21wb25lbnRzLXN0b3JlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFXL0IsTUFBTSxPQUFPLGdCQUFnQjtJQUVYLE9BQU8sR0FBa0IsSUFBSSxPQUFPLEVBQVEsQ0FBQztJQUU3RCxJQUFXLFFBQVE7UUFDakIsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLFdBQVksQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBVyxTQUFTO1FBQ2xCLE9BQU8sSUFBSSxDQUFDLE9BQU8sRUFBRSxTQUFVLENBQUM7SUFDbEMsQ0FBQztJQUVNLEtBQUssQ0FBd0I7SUFFN0IsT0FBTyxDQUEwQjtJQUVqQyxXQUFXLENBQThCO0lBRXpDLE1BQU0sR0FBZ0IsRUFBRSxDQUFDO0lBRXpCLFlBQVksR0FBc0IsRUFBRSxDQUFDO0lBRXJDLGVBQWUsQ0FBOEI7SUFFN0MsUUFBUSxHQUFrQixFQUFFLENBQUM7SUFFN0IsUUFBUSxHQUFxQixFQUFFLENBQUM7SUFFaEMsT0FBTyxHQUFxQixFQUFFLENBQUM7SUFFL0IsUUFBUSxHQUFxQixFQUFFLENBQUM7SUFFaEMsVUFBVSxDQUE2QjtJQUV2QyxRQUFRLENBQUMsT0FBaUM7UUFDL0MsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRU0sWUFBWSxDQUFJLFVBQWUsRUFBRSxTQUFZO1FBQ2xELFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDM0IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRU0sZUFBZSxDQUFJLFVBQWUsRUFBRSxTQUFZO1FBQ3JELE1BQU0sS0FBSyxHQUFHLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDNUMsSUFBSSxLQUFLLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUNmLFVBQVUsQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO1lBQzVCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdEIsQ0FBQztJQUNILENBQUM7dUdBakRVLGdCQUFnQjsyR0FBaEIsZ0JBQWdCOzsyRkFBaEIsZ0JBQWdCO2tCQUQ1QixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgSVRyYW5zZm9ybU1vZGVsIH0gZnJvbSAnQGZvYmxleC9jb3JlJztcbmltcG9ydCB7IEZDb25uZWN0aW9uQmFzZSwgRk1hcmtlckJhc2UgfSBmcm9tICcuLi9mLWNvbm5lY3Rpb24nO1xuaW1wb3J0IHsgRkZsb3dCYXNlIH0gZnJvbSAnLi4vZi1mbG93JztcbmltcG9ydCB7IEZDYW52YXNCYXNlIH0gZnJvbSAnLi4vZi1jYW52YXMnO1xuaW1wb3J0IHsgRkJhY2tncm91bmRCYXNlIH0gZnJvbSAnLi4vZi1iYWNrZ3JvdWQnO1xuaW1wb3J0IHsgRk5vZGVCYXNlIH0gZnJvbSAnLi4vZi1ub2RlJztcbmltcG9ydCB7IEZDb25uZWN0b3JCYXNlIH0gZnJvbSAnLi4vZi1jb25uZWN0b3JzJztcbmltcG9ydCB7IEZEcmFnZ2FibGVCYXNlIH0gZnJvbSAnLi4vZi1kcmFnZ2FibGUnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgRkNvbXBvbmVudHNTdG9yZSB7XG5cbiAgcHVibGljIHJlYWRvbmx5IGNoYW5nZXM6IFN1YmplY3Q8dm9pZD4gPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIHB1YmxpYyBnZXQgZmxvd0hvc3QoKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmZGbG93Py5ob3N0RWxlbWVudCE7XG4gIH1cblxuICBwdWJsaWMgZ2V0IHRyYW5zZm9ybSgpOiBJVHJhbnNmb3JtTW9kZWwge1xuICAgIHJldHVybiB0aGlzLmZDYW52YXM/LnRyYW5zZm9ybSE7XG4gIH1cblxuICBwdWJsaWMgZkZsb3c6IEZGbG93QmFzZSB8IHVuZGVmaW5lZDtcblxuICBwdWJsaWMgZkNhbnZhczogRkNhbnZhc0Jhc2UgfCB1bmRlZmluZWQ7XG5cbiAgcHVibGljIGZCYWNrZ3JvdW5kOiBGQmFja2dyb3VuZEJhc2UgfCB1bmRlZmluZWQ7XG5cbiAgcHVibGljIGZOb2RlczogRk5vZGVCYXNlW10gPSBbXTtcblxuICBwdWJsaWMgZkNvbm5lY3Rpb25zOiBGQ29ubmVjdGlvbkJhc2VbXSA9IFtdO1xuXG4gIHB1YmxpYyBmVGVtcENvbm5lY3Rpb246IEZDb25uZWN0aW9uQmFzZSB8IHVuZGVmaW5lZDtcblxuICBwdWJsaWMgZk1hcmtlcnM6IEZNYXJrZXJCYXNlW10gPSBbXTtcblxuICBwdWJsaWMgZk91dHB1dHM6IEZDb25uZWN0b3JCYXNlW10gPSBbXTtcblxuICBwdWJsaWMgZklucHV0czogRkNvbm5lY3RvckJhc2VbXSA9IFtdO1xuXG4gIHB1YmxpYyBmT3V0bGV0czogRkNvbm5lY3RvckJhc2VbXSA9IFtdO1xuXG4gIHB1YmxpYyBmRHJhZ2dhYmxlOiBGRHJhZ2dhYmxlQmFzZSB8IHVuZGVmaW5lZDtcblxuICBwdWJsaWMgZmluZE5vZGUoZWxlbWVudDogSFRNTEVsZW1lbnQgfCBTVkdFbGVtZW50KTogRk5vZGVCYXNlIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gdGhpcy5mTm9kZXMuZmluZChuID0+IG4uaXNDb250YWlucyhlbGVtZW50KSk7XG4gIH1cblxuICBwdWJsaWMgYWRkQ29tcG9uZW50PFQ+KGNvbGxlY3Rpb246IFRbXSwgY29tcG9uZW50OiBUKTogdm9pZCB7XG4gICAgY29sbGVjdGlvbi5wdXNoKGNvbXBvbmVudCk7XG4gICAgdGhpcy5jaGFuZ2VzLm5leHQoKTtcbiAgfVxuXG4gIHB1YmxpYyByZW1vdmVDb21wb25lbnQ8VD4oY29sbGVjdGlvbjogVFtdLCBjb21wb25lbnQ6IFQpOiB2b2lkIHtcbiAgICBjb25zdCBpbmRleCA9IGNvbGxlY3Rpb24uaW5kZXhPZihjb21wb25lbnQpO1xuICAgIGlmIChpbmRleCA+IC0xKSB7XG4gICAgICBjb2xsZWN0aW9uLnNwbGljZShpbmRleCwgMSk7XG4gICAgICB0aGlzLmNoYW5nZXMubmV4dCgpO1xuICAgIH1cbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1jb21wb25lbnRzLXN0b3JlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZi1mbG93L3NyYy9mLXN0b3JhZ2UvZi1jb21wb25lbnRzLXN0b3JlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFjLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFXM0MsTUFBTSxPQUFPLGdCQUFnQjtJQUVWLHFCQUFxQixHQUFrQixJQUFJLE9BQU8sRUFBUSxDQUFDO0lBQzVFLElBQVcsZUFBZTtRQUN4QixPQUFPLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUNuRCxDQUFDO0lBRWdCLHNCQUFzQixHQUFrQixJQUFJLE9BQU8sRUFBUSxDQUFDO0lBQzdFLElBQVcsZ0JBQWdCO1FBQ3pCLE9BQU8sSUFBSSxDQUFDLHNCQUFzQixDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3BELENBQUM7SUFFRCxJQUFXLFFBQVE7UUFDakIsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLFdBQVksQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBVyxTQUFTO1FBQ2xCLE9BQU8sSUFBSSxDQUFDLE9BQU8sRUFBRSxTQUFVLENBQUM7SUFDbEMsQ0FBQztJQUVNLEtBQUssQ0FBd0I7SUFFN0IsT0FBTyxDQUEwQjtJQUVqQyxXQUFXLENBQThCO0lBRXpDLE1BQU0sR0FBZ0IsRUFBRSxDQUFDO0lBRXpCLFlBQVksR0FBc0IsRUFBRSxDQUFDO0lBRXJDLGVBQWUsQ0FBOEI7SUFFN0MsUUFBUSxHQUFrQixFQUFFLENBQUM7SUFFN0IsUUFBUSxHQUFxQixFQUFFLENBQUM7SUFFaEMsT0FBTyxHQUFxQixFQUFFLENBQUM7SUFFL0IsUUFBUSxHQUFxQixFQUFFLENBQUM7SUFFaEMsVUFBVSxDQUE2QjtJQUV2QyxRQUFRLENBQUMsT0FBaUM7UUFDL0MsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRU0sWUFBWSxDQUFJLFVBQWUsRUFBRSxTQUFZO1FBQ2xELFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDM0IsSUFBSSxDQUFDLHNCQUFzQixDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JDLENBQUM7SUFFTSxlQUFlLENBQUksVUFBZSxFQUFFLFNBQVk7UUFDckQsTUFBTSxLQUFLLEdBQUcsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM1QyxJQUFJLEtBQUssR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ2YsVUFBVSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFDNUIsSUFBSSxDQUFDLHNCQUFzQixDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3JDLENBQUM7SUFDSCxDQUFDO0lBRU0sb0JBQW9CO1FBQ3pCLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNwQyxDQUFDO3VHQTdEVSxnQkFBZ0I7MkdBQWhCLGdCQUFnQjs7MkZBQWhCLGdCQUFnQjtrQkFENUIsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IElUcmFuc2Zvcm1Nb2RlbCB9IGZyb20gJ0Bmb2JsZXgvY29yZSc7XG5pbXBvcnQgeyBGQ29ubmVjdGlvbkJhc2UsIEZNYXJrZXJCYXNlIH0gZnJvbSAnLi4vZi1jb25uZWN0aW9uJztcbmltcG9ydCB7IEZGbG93QmFzZSB9IGZyb20gJy4uL2YtZmxvdyc7XG5pbXBvcnQgeyBGQ2FudmFzQmFzZSB9IGZyb20gJy4uL2YtY2FudmFzJztcbmltcG9ydCB7IEZCYWNrZ3JvdW5kQmFzZSB9IGZyb20gJy4uL2YtYmFja2dyb3VkJztcbmltcG9ydCB7IEZOb2RlQmFzZSB9IGZyb20gJy4uL2Ytbm9kZSc7XG5pbXBvcnQgeyBGQ29ubmVjdG9yQmFzZSB9IGZyb20gJy4uL2YtY29ubmVjdG9ycyc7XG5pbXBvcnQgeyBGRHJhZ2dhYmxlQmFzZSB9IGZyb20gJy4uL2YtZHJhZ2dhYmxlJztcblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIEZDb21wb25lbnRzU3RvcmUge1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgY29tcG9uZW50c0RhdGFDaGFuZ2VzOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgcHVibGljIGdldCBjb21wb25lbnRzRGF0YSQoKTogT2JzZXJ2YWJsZTx2b2lkPiB7XG4gICAgcmV0dXJuIHRoaXMuY29tcG9uZW50c0RhdGFDaGFuZ2VzLmFzT2JzZXJ2YWJsZSgpO1xuICB9XG5cbiAgcHJpdmF0ZSByZWFkb25seSBjb21wb25lbnRzQ291bnRDaGFuZ2VzOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgcHVibGljIGdldCBjb21wb25lbnRzQ291bnQkKCk6IE9ic2VydmFibGU8dm9pZD4ge1xuICAgIHJldHVybiB0aGlzLmNvbXBvbmVudHNDb3VudENoYW5nZXMuYXNPYnNlcnZhYmxlKCk7XG4gIH1cblxuICBwdWJsaWMgZ2V0IGZsb3dIb3N0KCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5mRmxvdz8uaG9zdEVsZW1lbnQhO1xuICB9XG5cbiAgcHVibGljIGdldCB0cmFuc2Zvcm0oKTogSVRyYW5zZm9ybU1vZGVsIHtcbiAgICByZXR1cm4gdGhpcy5mQ2FudmFzPy50cmFuc2Zvcm0hO1xuICB9XG5cbiAgcHVibGljIGZGbG93OiBGRmxvd0Jhc2UgfCB1bmRlZmluZWQ7XG5cbiAgcHVibGljIGZDYW52YXM6IEZDYW52YXNCYXNlIHwgdW5kZWZpbmVkO1xuXG4gIHB1YmxpYyBmQmFja2dyb3VuZDogRkJhY2tncm91bmRCYXNlIHwgdW5kZWZpbmVkO1xuXG4gIHB1YmxpYyBmTm9kZXM6IEZOb2RlQmFzZVtdID0gW107XG5cbiAgcHVibGljIGZDb25uZWN0aW9uczogRkNvbm5lY3Rpb25CYXNlW10gPSBbXTtcblxuICBwdWJsaWMgZlRlbXBDb25uZWN0aW9uOiBGQ29ubmVjdGlvbkJhc2UgfCB1bmRlZmluZWQ7XG5cbiAgcHVibGljIGZNYXJrZXJzOiBGTWFya2VyQmFzZVtdID0gW107XG5cbiAgcHVibGljIGZPdXRwdXRzOiBGQ29ubmVjdG9yQmFzZVtdID0gW107XG5cbiAgcHVibGljIGZJbnB1dHM6IEZDb25uZWN0b3JCYXNlW10gPSBbXTtcblxuICBwdWJsaWMgZk91dGxldHM6IEZDb25uZWN0b3JCYXNlW10gPSBbXTtcblxuICBwdWJsaWMgZkRyYWdnYWJsZTogRkRyYWdnYWJsZUJhc2UgfCB1bmRlZmluZWQ7XG5cbiAgcHVibGljIGZpbmROb2RlKGVsZW1lbnQ6IEhUTUxFbGVtZW50IHwgU1ZHRWxlbWVudCk6IEZOb2RlQmFzZSB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMuZk5vZGVzLmZpbmQobiA9PiBuLmlzQ29udGFpbnMoZWxlbWVudCkpO1xuICB9XG5cbiAgcHVibGljIGFkZENvbXBvbmVudDxUPihjb2xsZWN0aW9uOiBUW10sIGNvbXBvbmVudDogVCk6IHZvaWQge1xuICAgIGNvbGxlY3Rpb24ucHVzaChjb21wb25lbnQpO1xuICAgIHRoaXMuY29tcG9uZW50c0NvdW50Q2hhbmdlcy5uZXh0KCk7XG4gIH1cblxuICBwdWJsaWMgcmVtb3ZlQ29tcG9uZW50PFQ+KGNvbGxlY3Rpb246IFRbXSwgY29tcG9uZW50OiBUKTogdm9pZCB7XG4gICAgY29uc3QgaW5kZXggPSBjb2xsZWN0aW9uLmluZGV4T2YoY29tcG9uZW50KTtcbiAgICBpZiAoaW5kZXggPiAtMSkge1xuICAgICAgY29sbGVjdGlvbi5zcGxpY2UoaW5kZXgsIDEpO1xuICAgICAgdGhpcy5jb21wb25lbnRzQ291bnRDaGFuZ2VzLm5leHQoKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgY29tcG9uZW50RGF0YUNoYW5nZWQoKTogdm9pZCB7XG4gICAgdGhpcy5jb21wb25lbnRzRGF0YUNoYW5nZXMubmV4dCgpO1xuICB9XG59XG4iXX0=

package/f-canvas/f-canvas-base.d.ts

@@ -13,6 +13,7 @@ export declare abstract class FCanvasBase extends MIXIN_BASE implements IHasHost
     abstract fCanvasChange: EventEmitter<FCanvasChangeEvent>;
     abstract fNodes: FNodeBase[];
     abstract hostElement: HTMLElement;
+    abstract fGroupsContainer: ElementRef<HTMLElement>;
     abstract fNodesContainer: ElementRef<HTMLElement>;
     abstract fConnectionsContainer: ElementRef<HTMLElement>;
     protected constructor();

package/f-canvas/f-canvas.component.d.ts

@@ -15,6 +15,7 @@ export declare class FCanvasComponent extends FCanvasBase implements OnInit {
     set scale(value: number | undefined);
     get fNodes(): FNodeBase[];
     get hostElement(): HTMLElement;
+    fGroupsContainer: ElementRef<HTMLElement>;
     fNodesContainer: ElementRef<HTMLElement>;
     fConnectionsContainer: ElementRef<HTMLElement>;
     constructor(elementReference: ElementRef<HTMLElement>, fMediator: FFlowMediator, fComponentsStore: FComponentsStore);
@@ -24,5 +25,5 @@ export declare class FCanvasComponent extends FCanvasBase implements OnInit {
     fitToScreen(toCenter?: IPoint, animated?: boolean): void;
     oneToOne(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FCanvasComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FCanvasComponent, "f-canvas", ["fComponent"], { "position": { "alias": "position"; "required": false; }; "scale": { "alias": "scale"; "required": false; }; }, { "fCanvasChange": "fCanvasChange"; }, never, ["f-connection", "f-connection-for-create", "[fGroup]", "[fNode]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FCanvasComponent, "f-canvas", ["fComponent"], { "position": { "alias": "position"; "required": false; }; "scale": { "alias": "scale"; "required": false; }; }, { "fCanvasChange": "fCanvasChange"; }, never, ["[fGroup]", "f-connection", "f-connection-for-create", "[fNode]"], false, never>;
 }

package/f-connection/common/f-connection-base.d.ts

@@ -24,7 +24,7 @@ declare const MIXIN_BASE: import("@foblex/core").Constructor<ISelectable> & impo
 };
 export declare abstract class FConnectionBase extends MIXIN_BASE implements IHasHostElement, ISelectable, ICanChangeConnectionVisibility, IHasStateChanges, IHasConnectionColor, IHasConnectionFromTo, IHasConnectionText {
     private cFactory;
-    abstract fConnectionId: string;
+    abstract fId: string;
     abstract fStartColor: string;
     abstract fEndColor: string;
     abstract fOutputId: string;
@@ -48,6 +48,7 @@ export declare abstract class FConnectionBase extends MIXIN_BASE implements IHas
     abstract fTextComponent: IConnectionText;
     abstract fText: string;
     abstract fConnectionCenter: ElementRef<HTMLDivElement>;
+    private penultimatePoint;
     protected constructor(elementReference: ElementRef<HTMLElement>, cFactory: FConnectionFactory);
     initialize(): void;
     isContains(element: HTMLElement | SVGElement): boolean;

package/f-connection/common/f-drag-handle/f-connection-drag-handle.component.d.ts

@@ -7,7 +7,7 @@ export declare class FConnectionDragHandleComponent implements IHasHostElement {
     readonly class: string;
     get hostElement(): SVGCircleElement;
     constructor(elementReference: ElementRef<SVGCircleElement>);
-    redraw(start: IPoint, end: IPoint): void;
+    redraw(penultimatePoint: IPoint, endPoint: IPoint): void;
     private calculateCircleCenter;
     static ɵfac: i0.ɵɵFactoryDeclaration<FConnectionDragHandleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FConnectionDragHandleComponent, "circle[f-connection-drag-handle]", never, {}, {}, never, never, false, never>;

package/f-connection/common/i-has-connection-from-to.d.ts

@@ -1,5 +1,5 @@
 export interface IHasConnectionFromTo {
-    fConnectionId: string;
+    fId: string;
     fOutputId: string;
     fInputId: string;
 }

package/f-connection/common/mixins/change-connection-selection.mixin.d.ts

@@ -1,5 +1,6 @@
 import { IHasHostElement, AbstractConstructor, Constructor } from '@foblex/core';
 export interface ISelectable {
+    fId: string;
     fSelectionDisabled: boolean;
     hostElement: HTMLElement | SVGElement;
     select(): void;

package/f-connection/f-connection/f-connection.component.d.ts

@@ -1,15 +1,16 @@
 import { ElementRef, OnDestroy, OnInit, QueryList } from "@angular/core";
-import { FConnectionBase, FConnectionDragHandleComponent, FConnectionSelectionComponent, IConnectionGradient, IConnectionPath, IConnectionText } from '../common';
+import { FConnectionDragHandleComponent, FConnectionSelectionComponent, IConnectionGradient, IConnectionPath, IConnectionText } from '../common';
 import { EFConnectionBehavior } from '../common';
 import { EFConnectionType } from '../common';
 import { FComponentsStore } from '../../f-storage';
 import { FMarkerBase } from '../f-marker';
 import { FConnectionCenterDirective } from '../f-connection-center';
 import { FConnectionFactory } from '../f-connection-builder';
+import { FConnectionBase } from '../common/f-connection-base';
 import * as i0 from "@angular/core";
 export declare class FConnectionComponent extends FConnectionBase implements OnInit, OnDestroy {
     private fComponentsStore;
-    fConnectionId: string;
+    fId: string;
     private _fText;
     set fText(value: string);
     get fText(): string;
@@ -53,5 +54,5 @@ export declare class FConnectionComponent extends FConnectionBase implements OnI
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FConnectionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FConnectionComponent, "f-connection", ["fComponent"], { "fConnectionId": { "alias": "fConnectionId"; "required": false; }; "fText": { "alias": "fText"; "required": false; }; "fStartColor": { "alias": "fStartColor"; "required": false; }; "fEndColor": { "alias": "fEndColor"; "required": false; }; "fOutputId": { "alias": "fOutputId"; "required": false; }; "fInputId": { "alias": "fInputId"; "required": false; }; "fRadius": { "alias": "fRadius"; "required": false; }; "fOffset": { "alias": "fOffset"; "required": false; }; "fBehavior": { "alias": "fBehavior"; "required": false; }; "fType": { "alias": "fType"; "required": false; }; "fDraggingDisabled": { "alias": "fReassignDisabled"; "required": false; }; "fSelectionDisabled": { "alias": "fSelectionDisabled"; "required": false; }; }, {}, ["fConnectionCenters"], ["*", "[fConnectionCenter]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FConnectionComponent, "f-connection", ["fComponent"], { "fId": { "alias": "fConnectionId"; "required": false; }; "fText": { "alias": "fText"; "required": false; }; "fStartColor": { "alias": "fStartColor"; "required": false; }; "fEndColor": { "alias": "fEndColor"; "required": false; }; "fOutputId": { "alias": "fOutputId"; "required": false; }; "fInputId": { "alias": "fInputId"; "required": false; }; "fRadius": { "alias": "fRadius"; "required": false; }; "fOffset": { "alias": "fOffset"; "required": false; }; "fBehavior": { "alias": "fBehavior"; "required": false; }; "fType": { "alias": "fType"; "required": false; }; "fDraggingDisabled": { "alias": "fReassignDisabled"; "required": false; }; "fSelectionDisabled": { "alias": "fSelectionDisabled"; "required": false; }; }, {}, ["fConnectionCenters"], ["*", "[fConnectionCenter]"], false, never>;
 }

package/f-connection/f-connection-builder/i-f-connection-builder-response.d.ts

@@ -2,4 +2,5 @@ import { IPoint } from '@foblex/core';
 export interface IFConnectionBuilderResponse {
     path: string;
     connectionCenter: IPoint;
+    penultimatePoint: IPoint;
 }

package/f-connection/f-connection-for-create/f-connection-for-create.component.d.ts

@@ -1,15 +1,16 @@
 import { AfterViewInit, ElementRef, OnDestroy, OnInit, QueryList } from "@angular/core";
-import { FConnectionBase, FConnectionDragHandleComponent, FConnectionSelectionComponent, IConnectionGradient, IConnectionPath, IConnectionText } from '../common';
+import { FConnectionDragHandleComponent, FConnectionSelectionComponent, IConnectionGradient, IConnectionPath, IConnectionText } from '../common';
 import { EFConnectionBehavior } from '../common';
 import { EFConnectionType } from '../common';
 import { FMarkerBase } from '../f-marker';
 import { FConnectionCenterDirective } from '../f-connection-center';
 import { FConnectionFactory } from '../f-connection-builder';
 import { FComponentsStore } from '../../f-storage';
+import { FConnectionBase } from '../common/f-connection-base';
 import * as i0 from "@angular/core";
 export declare class FConnectionForCreateComponent extends FConnectionBase implements AfterViewInit, OnInit, OnDestroy {
     private fComponentsStore;
-    fConnectionId: string;
+    fId: string;
     fText: string;
     private _fStartColor;
     set fStartColor(value: string);
@@ -48,5 +49,5 @@ export declare class FConnectionForCreateComponent extends FConnectionBase imple
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FConnectionForCreateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FConnectionForCreateComponent, "f-connection-for-create", never, { "fStartColor": { "alias": "fStartColor"; "required": false; }; "fEndColor": { "alias": "fEndColor"; "required": false; }; "fRadius": { "alias": "fRadius"; "required": false; }; "fOffset": { "alias": "fOffset"; "required": false; }; "fBehavior": { "alias": "fBehavior"; "required": false; }; "fType": { "alias": "fType"; "required": false; }; }, {}, ["fConnectionCenters"], ["*", "[fConnectionCenter]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FConnectionForCreateComponent, "f-connection-for-create", never, { "fId": { "alias": "fConnectionId"; "required": false; }; "fStartColor": { "alias": "fStartColor"; "required": false; }; "fEndColor": { "alias": "fEndColor"; "required": false; }; "fRadius": { "alias": "fRadius"; "required": false; }; "fOffset": { "alias": "fOffset"; "required": false; }; "fBehavior": { "alias": "fBehavior"; "required": false; }; "fType": { "alias": "fType"; "required": false; }; }, {}, ["fConnectionCenters"], ["*", "[fConnectionCenter]"], false, never>;
 }

package/f-draggable/canvas/canvas-move-preparation/canvas-move-preparation.validator.d.ts

@@ -12,6 +12,7 @@ export declare class CanvasMovePreparationValidator implements IValidator<Canvas
     private isBackgroundElement;
     private isDragOnHost;
     private getNode;
+    private isNodeHasDragHandle;
     static ɵfac: i0.ɵɵFactoryDeclaration<CanvasMovePreparationValidator, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<CanvasMovePreparationValidator>;
 }

package/f-draggable/canvas/canvas.drag-handler.d.ts

@@ -1,10 +1,8 @@
 import { IPoint } from '@foblex/core';
 import { IDraggableItem } from '../i-draggable-item';
-import { EFDraggableType } from '../e-f-draggable-type';
 import { FComponentsStore } from '../../f-storage';
 export declare class CanvasDragHandler implements IDraggableItem {
     private fComponentsStore;
-    readonly type: EFDraggableType;
     private onPointerDownPosition;
     constructor(fComponentsStore: FComponentsStore);
     initialize(): void;

package/f-draggable/connections/create-connection/create-connection.drag-handler.d.ts

@@ -1,13 +1,11 @@
 import { IPoint } from '@foblex/core';
 import { IDraggableItem } from '../../i-draggable-item';
-import { EFDraggableType } from '../../e-f-draggable-type';
 import { FConnectionBase } from '../../../f-connection';
 import { FFlowMediator } from '../../../infrastructure';
 export declare class CreateConnectionDragHandler implements IDraggableItem {
     private fMediator;
     connection: FConnectionBase;
     private mouseDownPoint;
-    readonly type: EFDraggableType;
     private onPointerDownFromConnectorRect;
     private onPointerDownToConnectorRect;
     private outputSide;

package/f-draggable/connections/reassign-connection/reassign-connection.drag-handler.d.ts

@@ -1,12 +1,10 @@
 import { IPoint } from '@foblex/core';
 import { IDraggableItem } from '../../i-draggable-item';
-import { EFDraggableType } from '../../e-f-draggable-type';
 import { FConnectionBase } from '../../../f-connection';
 import { FFlowMediator } from '../../../infrastructure';
 export declare class ReassignConnectionDragHandler implements IDraggableItem {
     private fMediator;
     connection: FConnectionBase;
-    readonly type: EFDraggableType;
     private onPointerDownFromConnectorRect;
     private onPointerDownToConnectorRect;
     private outputSide;

package/f-draggable/domain/convert-computed-to-pixels/convert-computed-to-pixels-request.d.ts

@@ -0,0 +1,7 @@
+export declare class ConvertComputedToPixelsRequest {
+    value: string;
+    clientWidth: number;
+    clientHeight: number;
+    fontSize: string;
+    constructor(value: string, clientWidth: number, clientHeight: number, fontSize: string);
+}

package/f-draggable/domain/convert-computed-to-pixels/convert-computed-to-pixels.execution.d.ts

@@ -0,0 +1,12 @@
+import { ConvertComputedToPixelsRequest } from './convert-computed-to-pixels-request';
+import { WindowService } from '@foblex/core';
+import { IExecution } from '../../../infrastructure';
+import * as i0 from "@angular/core";
+export declare class ConvertComputedToPixelsExecution implements IExecution<ConvertComputedToPixelsRequest, number> {
+    private windowService;
+    constructor(windowService: WindowService);
+    handle(request: ConvertComputedToPixelsRequest): number;
+    private convert;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConvertComputedToPixelsExecution, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ConvertComputedToPixelsExecution>;
+}

package/f-draggable/domain/convert-computed-to-pixels/index.d.ts

@@ -0,0 +1,2 @@
+export * from './convert-computed-to-pixels.execution';
+export * from './convert-computed-to-pixels-request';

package/f-draggable/domain/get-node-padding/get-node-padding.execution.d.ts

@@ -0,0 +1,12 @@
+import { GetNodePaddingRequest } from './get-node-padding.request';
+import { FFlowMediator, IExecution } from '../../../infrastructure';
+import * as i0 from "@angular/core";
+export declare class GetNodePaddingExecution implements IExecution<GetNodePaddingRequest, [number, number, number, number]> {
+    private fMediator;
+    constructor(fMediator: FFlowMediator);
+    handle(request: GetNodePaddingRequest): [number, number, number, number];
+    private getPaddingData;
+    private convertToPixels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GetNodePaddingExecution, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GetNodePaddingExecution>;
+}

package/f-draggable/domain/get-node-padding/get-node-padding.request.d.ts

@@ -0,0 +1,7 @@
+import { FNodeBase } from '../../../f-node';
+import { IRect } from '@foblex/core';
+export declare class GetNodePaddingRequest {
+    fNode: FNodeBase;
+    rect: IRect;
+    constructor(fNode: FNodeBase, rect: IRect);
+}

package/f-draggable/domain/get-node-padding/index.d.ts

@@ -0,0 +1,2 @@
+export * from './get-node-padding.execution';
+export * from './get-node-padding.request';

package/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.execution.d.ts

@@ -0,0 +1,13 @@
+import { GetNormalizedNodeRectRequest } from './get-normalized-node-rect.request';
+import { IRect } from '@foblex/core';
+import { IExecution } from '../../../infrastructure';
+import { FComponentsStore } from '../../../f-storage';
+import * as i0 from "@angular/core";
+export declare class GetNormalizedNodeRectExecution implements IExecution<GetNormalizedNodeRectRequest, IRect> {
+    private fComponentsStore;
+    constructor(fComponentsStore: FComponentsStore);
+    handle(request: GetNormalizedNodeRectRequest): IRect;
+    private normalizeRect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GetNormalizedNodeRectExecution, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GetNormalizedNodeRectExecution>;
+}

package/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.request.d.ts

@@ -0,0 +1,5 @@
+import { FNodeBase } from '../../../f-node';
+export declare class GetNormalizedNodeRectRequest {
+    fNode: FNodeBase;
+    constructor(fNode: FNodeBase);
+}

package/f-draggable/domain/get-normalized-node-rect/index.d.ts

@@ -0,0 +1,2 @@
+export * from './get-normalized-node-rect.execution';
+export * from './get-normalized-node-rect.request';

package/f-draggable/domain/get-normalized-parent-node-rect/get-normalized-parent-node-rect.execution.d.ts

@@ -0,0 +1,17 @@
+import { GetNormalizedParentNodeRectRequest } from './get-normalized-parent-node-rect.request';
+import { IRect } from '@foblex/core';
+import { FFlowMediator, IExecution } from '../../../infrastructure';
+import { FComponentsStore } from '../../../f-storage';
+import * as i0 from "@angular/core";
+export declare class GetNormalizedParentNodeRectExecution implements IExecution<GetNormalizedParentNodeRectRequest, IRect> {
+    private fComponentsStore;
+    private fMediator;
+    constructor(fComponentsStore: FComponentsStore, fMediator: FFlowMediator);
+    handle(request: GetNormalizedParentNodeRectRequest): IRect;
+    private getNode;
+    private getParentRect;
+    private getNormalizedNodeRect;
+    private getNodePadding;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GetNormalizedParentNodeRectExecution, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GetNormalizedParentNodeRectExecution>;
+}

package/f-draggable/domain/get-normalized-parent-node-rect/get-normalized-parent-node-rect.request.d.ts

@@ -0,0 +1,5 @@
+import { FNodeBase } from '../../../f-node';
+export declare class GetNormalizedParentNodeRectRequest {
+    fNode: FNodeBase;
+    constructor(fNode: FNodeBase);
+}

package/f-draggable/domain/get-normalized-parent-node-rect/index.d.ts

@@ -0,0 +1,2 @@
+export * from './get-normalized-parent-node-rect.execution';
+export * from './get-normalized-parent-node-rect.request';

package/f-draggable/domain/get-parent-nodes/get-parent-nodes.execution.d.ts

@@ -0,0 +1,13 @@
+import { GetParentNodesRequest } from './get-parent-nodes.request';
+import { IExecution } from '../../../infrastructure';
+import { FNodeBase } from '../../../f-node';
+import { FComponentsStore } from '../../../f-storage';
+import * as i0 from "@angular/core";
+export declare class GetParentNodesExecution implements IExecution<GetParentNodesRequest, FNodeBase[]> {
+    private fComponentsStore;
+    constructor(fComponentsStore: FComponentsStore);
+    handle(request: GetParentNodesRequest): FNodeBase[];
+    private getParentNodes;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GetParentNodesExecution, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GetParentNodesExecution>;
+}

package/f-draggable/domain/get-parent-nodes/get-parent-nodes.request.d.ts

@@ -0,0 +1,5 @@
+import { FNodeBase } from '../../../f-node';
+export declare class GetParentNodesRequest {
+    fNode: FNodeBase;
+    constructor(fNode: FNodeBase);
+}

package/f-draggable/domain/get-parent-nodes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './get-parent-nodes.execution';
+export * from './get-parent-nodes.request';

package/f-draggable/domain/index.d.ts

@@ -0,0 +1,7 @@
+export * from './convert-computed-to-pixels';
+export * from './get-node-padding';
+export * from './get-normalized-node-rect';
+export * from './get-normalized-parent-node-rect';
+export * from './get-parent-nodes';
+export * from './is-array-has-parent-node';
+export * from './providers';

package/f-draggable/domain/is-array-has-parent-node/index.d.ts

@@ -0,0 +1,2 @@
+export * from './is-array-has-parent-node.execution';
+export * from './is-array-has-parent-node.request';

package/f-draggable/domain/is-array-has-parent-node/is-array-has-parent-node.execution.d.ts

@@ -0,0 +1,13 @@
+import { IsArrayHasParentNodeRequest } from './is-array-has-parent-node.request';
+import { FFlowMediator, IExecution } from '../../../infrastructure';
+import * as i0 from "@angular/core";
+export declare class IsArrayHasParentNodeExecution implements IExecution<IsArrayHasParentNodeRequest, boolean> {
+    private fMediator;
+    constructor(fMediator: FFlowMediator);
+    handle(request: IsArrayHasParentNodeRequest): boolean;
+    private getParentNodeIds;
+    private getParentNodes;
+    private isParentNodeInArray;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IsArrayHasParentNodeExecution, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<IsArrayHasParentNodeExecution>;
+}

package/f-draggable/domain/is-array-has-parent-node/is-array-has-parent-node.request.d.ts

@@ -0,0 +1,6 @@
+import { FNodeBase } from '../../../f-node';
+export declare class IsArrayHasParentNodeRequest {
+    fNode: FNodeBase;
+    fNodes: FNodeBase[];
+    constructor(fNode: FNodeBase, fNodes: FNodeBase[]);
+}

package/f-draggable/domain/providers.d.ts

@@ -0,0 +1,7 @@
+import { GetNormalizedNodeRectExecution } from './get-normalized-node-rect';
+import { ConvertComputedToPixelsExecution } from './convert-computed-to-pixels';
+import { GetParentNodesExecution } from './get-parent-nodes';
+import { IsArrayHasParentNodeExecution } from './is-array-has-parent-node';
+import { GetNormalizedParentNodeRectExecution } from './get-normalized-parent-node-rect';
+import { GetNodePaddingExecution } from './get-node-padding';
+export declare const DRAG_AND_DROP_COMMON_PROVIDERS: (typeof ConvertComputedToPixelsExecution | typeof GetNodePaddingExecution | typeof GetNormalizedNodeRectExecution | typeof GetNormalizedParentNodeRectExecution | typeof GetParentNodesExecution | typeof IsArrayHasParentNodeExecution)[];