@foblex/flow 1.3.1 → 1.3.3

package/fesm2022/foblex-flow.mjs

@@ -2219,13 +2219,14 @@ class ReassignConnectionPrepareDragSequence {
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, updateConnectionLayerHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.getConnectionHandler = getConnectionHandler;
         this.getInputRectInFlowHandler = getInputRectInFlowHandler;
         this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
         this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
     }
     handle(event) {
         const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
@@ -2242,6 +2243,7 @@ class ReassignConnectionPrepareDragSequence {
             }
         }
         if (connectionToReassign && !this.fDraggableDataContext.draggableItems.length) {
+            this.updateConnectionLayerHandler.handle(connectionToReassign);
             this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
             this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(this.transform.scale);
             this.fDraggableDataContext.draggableItems = [
@@ -2249,12 +2251,12 @@ class ReassignConnectionPrepareDragSequence {
             ];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetConnectionVectorHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: UpdateConnectionLayerHandler }] });
 
 const CONNECTIONS_PROVIDERS = [
     FindFirstCanBeConnectedOutputByOutletHandler,
@@ -2680,10 +2682,11 @@ const NODE_PROVIDERS = [
 ];
 
 class SingleSelectOnPointerDown {
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, updateConnectionLayerHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.getConnectionHandler = getConnectionHandler;
+        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
     }
     handle(event) {
         if (!this.fComponentsStore.fFlow?.hostElement.contains(event.targetElement)) {
@@ -2709,6 +2712,7 @@ class SingleSelectOnPointerDown {
             }
         }
         else if (connection) {
+            this.updateConnectionLayerHandler.handle(connection);
             if (!this.fDraggableDataContext.selectedItems.includes(connection)) {
                 this.fDraggableDataContext.selectedItems.push(connection);
                 if (element?.hostElement.id !== connection.hostElement.id) {
@@ -2742,12 +2746,12 @@ class SingleSelectOnPointerDown {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: UpdateConnectionLayerHandler }] });
 
 const SINGLE_SELECT_PROVIDERS = [
     SingleSelectOnPointerDown
@@ -3084,6 +3088,7 @@ class FDraggableDirective extends FDraggableBase {
         this.fCreateNode = new EventEmitter();
         this.fReassignConnection = new EventEmitter();
         this.fCreateConnection = new EventEmitter();
+        this.selectedItemsOnPointerDown = 0;
         this.document = document;
     }
     ngOnInit() {
@@ -3095,6 +3100,7 @@ class FDraggableDirective extends FDraggableBase {
     onPointerDown(event) {
         this.fDraggableDataContext.reset();
         let result = event.isMouseLeftButton();
+        this.selectedItemsOnPointerDown = this.fDraggableDataContext.selectedItems.length;
         this.injector.get(SingleSelectOnPointerDown).handle(event);
         this.injector.get(ReassignConnectionPrepareDragSequence).handle(event);
         this.injector.get(CreateConnectionPrepareDragSequence).handle(event);
@@ -3132,7 +3138,8 @@ class FDraggableDirective extends FDraggableBase {
         this.fDraggableDataContext.reset();
     }
     emitSelectionChangeEvent() {
-        if (!this.fDraggableDataContext.isSelectedChanged) {
+        if (!this.fDraggableDataContext.isSelectedChanged
+            && this.selectedItemsOnPointerDown === this.fDraggableDataContext.selectedItems.length) {
             return;
         }
         let selectedNodes = [];
@@ -3208,6 +3215,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
+class UpdateConnectionLayerHandler {
+    get fConnectionsContainer() {
+        return this.fComponentsStore.fCanvas?.fConnectionsContainer?.nativeElement;
+    }
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(connection) {
+        const elements = Array.from(this.fConnectionsContainer.children);
+        const elementsCount = elements.length;
+        const targetIndex = elements.findIndex((x) => x === connection.hostElement);
+        if (targetIndex !== elementsCount - 1) {
+            const afterElements = elements.splice(targetIndex + 1);
+            afterElements.forEach((x) => {
+                this.fConnectionsContainer.removeChild(x);
+                this.fConnectionsContainer.insertBefore(x, connection.hostElement);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: UpdateConnectionLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: UpdateConnectionLayerHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: UpdateConnectionLayerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
 const COMMON_PROVIDERS = [
     GetAllNodesRectHandler,
     GetConnectionVectorHandler,
@@ -3218,6 +3251,7 @@ const COMMON_PROVIDERS = [
     GetIncomingConnectionsHandler,
     GetOutgoingConnectionsHandler,
     SelectAllHandler,
+    UpdateConnectionLayerHandler,
     UpdateNodeLayerHandler,
 ];
 
@@ -4014,13 +4048,13 @@ class FCanvasComponent extends FCanvasBase {
         this.selectAllHandler.handle();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasComponent, deps: [{ token: GetAllNodesRectHandler }, { token: SelectAllHandler }, { token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], viewQueries: [{ propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"f-node\"></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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], viewQueries: [{ propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"f-node\"></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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
                         'class': 'f-component f-canvas',
-                    }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <div>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"f-node\"></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"] }]
+                    }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <div #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"f-node\"></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"] }]
         }], ctorParameters: () => [{ type: GetAllNodesRectHandler }, { type: SelectAllHandler }, { type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fCanvasChange: [{
                 type: Output
             }], position: [{
@@ -4030,6 +4064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
             }], fNodesContainer: [{
                 type: ViewChild,
                 args: ['fNodesContainer', { static: true }]
+            }], fConnectionsContainer: [{
+                type: ViewChild,
+                args: ['fConnectionsContainer', { static: true }]
             }] } });
 
 const F_FLOW = new InjectionToken('F_FLOW');