@foblex/flow 12.6.9 → 12.7.1

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

@@ -22,6 +22,7 @@ export declare class FCanvasComponent extends FCanvasBase implements OnInit {
     ngOnInit(): void;
     redraw(): void;
     redrawWithAnimation(): void;
+    private isMobile;
     centerGroupOrNode(id: string, animated?: boolean): void;
     fitToScreen(toCenter?: IPoint, animated?: boolean): void;
     resetScaleAndCenter(animated?: boolean): void;

package/f-draggable/connections/reassign-connection/f-reassign-connection.event.d.ts

@@ -1,7 +1,9 @@
+import { IPoint } from '@foblex/2d';
 export declare class FReassignConnectionEvent {
     fConnectionId: string;
     fOutputId: string;
     oldFInputId: string;
     newFInputId: string | undefined;
-    constructor(fConnectionId: string, fOutputId: string, oldFInputId: string, newFInputId: string | undefined);
+    fDropPosition: IPoint;
+    constructor(fConnectionId: string, fOutputId: string, oldFInputId: string, newFInputId: string | undefined, fDropPosition: IPoint);
 }

package/f-draggable/node/connection-base-drag-handler.d.ts

@@ -16,6 +16,7 @@ export declare abstract class ConnectionBaseDragHandler implements IDraggableIte
     initialize(): void;
     private getOutput;
     private getInput;
+    private connectorNotFoundPrefix;
     abstract move(difference: IPoint): void;
     protected getDifference(difference: IPoint, restrictions: INodeMoveRestrictions): IPoint;
     protected redrawConnection(line: ILine): void;

package/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.request.d.ts

@@ -1,2 +1,5 @@
+import { FNodeBase } from '../../../f-node';
 export declare class CreateMoveNodesDragModelFromSelectionRequest {
+    nodeWithDisabledSelection?: FNodeBase | undefined;
+    constructor(nodeWithDisabledSelection?: FNodeBase | undefined);
 }

package/fesm2015/foblex-flow.js

@@ -2286,11 +2286,12 @@ class ReassignConnectionFinalizeRequest {
 }
 
 class FReassignConnectionEvent {
-    constructor(fConnectionId, fOutputId, oldFInputId, newFInputId) {
+    constructor(fConnectionId, fOutputId, oldFInputId, newFInputId, fDropPosition) {
         this.fConnectionId = fConnectionId;
         this.fOutputId = fOutputId;
         this.oldFInputId = oldFInputId;
         this.newFInputId = newFInputId;
+        this.fDropPosition = fDropPosition;
     }
 }
 
@@ -2312,10 +2313,10 @@ let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecut
     }
     emitEvent(event) {
         const input = this.getInputUnderPointer(event);
-        if (!input || !this.isReassignToDifferentInput(input)) {
+        if (!!input && !this.isReassignToDifferentInput(input)) {
             return;
         }
-        this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(this.dragHandler.fConnection.fId, this.dragHandler.fConnection.fOutputId, this.dragHandler.fConnection.fInputId, input.id));
+        this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(this.dragHandler.fConnection.fId, this.dragHandler.fConnection.fOutputId, this.dragHandler.fConnection.fInputId, input === null || input === void 0 ? void 0 : input.id, event.getPosition()));
     }
     getInputUnderPointer(event) {
         return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
@@ -2718,7 +2719,7 @@ class FConnectionTextPathDirective {
     getSymbolWidth(name) {
         const text = name || 'connection';
         const { fontFamily, fontSize } = this.getFontStyles(this.hostElement);
-        this.fontSize = fontSize;
+        this.fontSize = fontSize || '12px';
         const canvas = this.fBrowser.document.createElement('canvas');
         let context;
         try {
@@ -3932,10 +3933,21 @@ class ConnectionBaseDragHandler {
         this.fInputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getInput()));
     }
     getOutput() {
-        return this.fComponentsStore.fOutputs.find((x) => x.id === this.connection.fOutputId);
+        const result = this.fComponentsStore.fOutputs.find((x) => x.id === this.connection.fOutputId);
+        if (!result) {
+            throw new Error(this.connectorNotFoundPrefix(`fOutput with id ${this.connection.fOutputId} not found`));
+        }
+        return result;
     }
     getInput() {
-        return this.fComponentsStore.fInputs.find((x) => x.id === this.connection.fInputId);
+        const result = this.fComponentsStore.fInputs.find((x) => x.id === this.connection.fInputId);
+        if (!result) {
+            throw new Error(this.connectorNotFoundPrefix(`fInput with id ${this.connection.fInputId} not found`));
+        }
+        return result;
+    }
+    connectorNotFoundPrefix(message) {
+        return `ConnectionDragHandler Error: Connection From (fOutput)${this.connection.fOutputId} To (fInput)${this.connection.fInputId}. ${message}. Please ensure that all f-connections are associated with existing connectors`;
     }
     getDifference(difference, restrictions) {
         return {
@@ -4171,6 +4183,9 @@ const DEFAULT_RESTRICTIONS = {
 };
 
 class CreateMoveNodesDragModelFromSelectionRequest {
+    constructor(nodeWithDisabledSelection) {
+        this.nodeWithDisabledSelection = nodeWithDisabledSelection;
+    }
 }
 
 class NodeDragHandler {
@@ -4225,13 +4240,17 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
         this.fMediator = fMediator;
     }
     handle(request) {
-        const itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes());
+        const itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes(request.nodeWithDisabledSelection));
         return this.getDragHandlersWithConnections(this.getDragHandlersFromNodes(itemsToDrag), this.getAllOutputIds(itemsToDrag), this.getAllInputIds(itemsToDrag));
     }
-    getSelectedNodes() {
-        return this.fDraggableDataContext.selectedItems
+    getSelectedNodes(nodeWithDisabledSelection) {
+        const result = this.fDraggableDataContext.selectedItems
             .map((x) => this.fComponentsStore.findNode(x.hostElement))
             .filter((x) => !!x);
+        if (nodeWithDisabledSelection) {
+            result.push(nodeWithDisabledSelection);
+        }
+        return result;
     }
     getNodesWithRestrictions(selectedNodes) {
         const result = [];
@@ -4312,22 +4331,32 @@ let NodeMovePreparationExecution = class NodeMovePreparationExecution {
         return this.fComponentsStore.fFlow.hostElement;
     }
     handle(request) {
-        this.selectAndUpdateNodeLayer(request.event.targetElement);
-        const itemsToDrag = this.createDragModelFromSelection();
+        const node = this.getNode(request.event.targetElement);
+        if (!node) {
+            throw new Error('Node not found');
+        }
+        let itemsToDrag = [];
+        if (!node.fSelectionDisabled) {
+            this.selectAndUpdateNodeLayer(node);
+            itemsToDrag = this.createDragModelFromSelection();
+        }
+        else {
+            itemsToDrag = this.createDragModelFromSelection(node);
+        }
         this.initializeLineAlignment(this.filterNodesFromDraggableItems(itemsToDrag));
         this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this.flowHost).div(this.transform.scale);
         this.fDraggableDataContext.draggableItems = itemsToDrag;
     }
-    selectAndUpdateNodeLayer(targetElement) {
-        this.fMediator.send(new SelectAndUpdateNodeLayerRequest(this.getNode(targetElement)));
+    selectAndUpdateNodeLayer(node) {
+        this.fMediator.send(new SelectAndUpdateNodeLayerRequest(node));
     }
     getNode(targetElement) {
         return this.fComponentsStore.findNode(targetElement);
     }
-    createDragModelFromSelection() {
-        return this.fMediator.send(new CreateMoveNodesDragModelFromSelectionRequest());
+    createDragModelFromSelection(nodeWithDisabledSelection) {
+        return this.fMediator.send(new CreateMoveNodesDragModelFromSelectionRequest(nodeWithDisabledSelection));
     }
     initializeLineAlignment(nodesToDrag) {
         var _a;
@@ -4926,6 +4955,9 @@ let SingleSelectExecution = class SingleSelectExecution {
                 this.clearSelection();
                 this.selectItem(item);
             }
+            else if (item.fSelectionDisabled) {
+                this.clearSelection();
+            }
         }
         else {
             this.clearSelection();
@@ -7183,11 +7215,18 @@ class FCanvasComponent extends FCanvasBase {
     }
     redrawWithAnimation() {
         var _a;
+        let duration = F_CANVAS_ANIMATION_DURATION;
+        if (this.isMobile()) {
+            duration = 80;
+        }
         (_a = this.fComponentsStore.fBackground) === null || _a === void 0 ? void 0 : _a.setTransform(this.transform);
-        this.hostElement.setAttribute("style", `transition: transform ${F_CANVAS_ANIMATION_DURATION}ms ease-in-out; transform: ${TransformModelExtensions.toString(this.transform)}`);
-        setTimeout(() => {
-            this.redraw();
-        }, F_CANVAS_ANIMATION_DURATION);
+        this.hostElement.setAttribute("style", `transition: transform ${duration}ms ease-in-out; transform: ${TransformModelExtensions.toString(this.transform)}`);
+        setTimeout(() => this.redraw(), F_CANVAS_ANIMATION_DURATION);
+    }
+    isMobile() {
+        // @ts-ignore
+        const userAgent = navigator.userAgent || navigator.vendor || window['opera'];
+        return /android|iPad|iPhone|iPod/i.test(userAgent);
     }
     centerGroupOrNode(id, animated = true) {
         this.fMediator.send(new CenterGroupOrNodeRequest(id, animated));
@@ -7859,6 +7898,40 @@ class FZoomBase {
         this.fComponentsStore = fComponentsStore;
         this.isEnabled = false;
         this.listeners = EventExtensions.emptyListener();
+        this.onWheel = (event) => {
+            var _a;
+            event.preventDefault();
+            const targetElement = event.target;
+            if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
+                return;
+            }
+            let result = this.getScale();
+            const direction = event.deltaY > 0 ? -1 : 1;
+            const step = this.step;
+            result = result + step * direction;
+            result = Math.max(this.minimum, Math.min(result, this.maximum));
+            const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
+            this.fCanvas.setZoom(result, pointerPositionInFlow);
+            this.fCanvas.redraw();
+            this.fCanvas.emitCanvasChangeEvent();
+        };
+        this.onDoubleClick = (event) => {
+            var _a;
+            event.preventDefault();
+            const targetElement = event.target;
+            if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || isNode(targetElement) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
+                return;
+            }
+            let result = this.getScale();
+            const direction = 1;
+            const step = this.dblClickStep;
+            result = result + step * direction;
+            result = Math.max(this.minimum, Math.min(result, this.maximum));
+            const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
+            this.fCanvas.setZoom(result, pointerPositionInFlow);
+            this.fCanvas.redrawWithAnimation();
+            this.fCanvas.emitCanvasChangeEvent();
+        };
     }
     get flowHost() {
         return this.fComponentsStore.flowHost;
@@ -7879,50 +7952,16 @@ class FZoomBase {
         if (!this.flowHost) {
             return;
         }
-        this.flowHost.addEventListener('wheel', this.onWheel.bind(this));
-        this.flowHost.addEventListener('dblclick', this.onDoubleClick.bind(this));
+        this.flowHost.addEventListener('wheel', this.onWheel);
+        this.flowHost.addEventListener('dblclick', this.onDoubleClick);
         this.listeners = () => {
-            this.flowHost.removeEventListener('wheel', this.onWheel.bind(this));
-            this.flowHost.removeEventListener('dblclick', this.onDoubleClick.bind(this));
+            this.flowHost.removeEventListener('wheel', this.onWheel);
+            this.flowHost.removeEventListener('dblclick', this.onDoubleClick);
         };
     }
     getScale() {
         return this.fCanvas.transform.scale || 1;
     }
-    onWheel(event) {
-        var _a;
-        event.preventDefault();
-        const targetElement = event.target;
-        if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
-            return;
-        }
-        let result = this.getScale();
-        const direction = event.deltaY > 0 ? -1 : 1;
-        const step = this.step;
-        result = result + step * direction;
-        result = Math.max(this.minimum, Math.min(result, this.maximum));
-        const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
-        this.fCanvas.setZoom(result, pointerPositionInFlow);
-        this.fCanvas.redraw();
-        this.fCanvas.emitCanvasChangeEvent();
-    }
-    onDoubleClick(event) {
-        var _a;
-        event.preventDefault();
-        const targetElement = event.target;
-        if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || isNode(targetElement) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
-            return;
-        }
-        let result = this.getScale();
-        const direction = 1;
-        const step = this.dblClickStep;
-        result = result + step * direction;
-        result = Math.max(this.minimum, Math.min(result, this.maximum));
-        const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
-        this.fCanvas.setZoom(result, pointerPositionInFlow);
-        this.fCanvas.redrawWithAnimation();
-        this.fCanvas.emitCanvasChangeEvent();
-    }
     onZoomToCenter(deltaY, position) {
         const preventDefault = () => {
         };