@foblex/flow 16.0.4 → 16.0.5

package/fesm2022/foblex-flow.mjs

@@ -2706,7 +2706,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 {
@@ -3884,10 +3884,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 {
@@ -4123,6 +4134,9 @@ const DEFAULT_RESTRICTIONS = {
 };
 
 class CreateMoveNodesDragModelFromSelectionRequest {
+    constructor(nodeWithDisabledSelection) {
+        this.nodeWithDisabledSelection = nodeWithDisabledSelection;
+    }
 }
 
 class NodeDragHandler {
@@ -4176,13 +4190,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 = [];
@@ -4263,22 +4281,32 @@ let NodeMovePreparationExecution = class NodeMovePreparationExecution {
         this.fMediator = fMediator;
     }
     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) {
         this.fDraggableDataContext.fLineAlignment?.initialize(this.fComponentsStore.fNodes, nodesToDrag);
@@ -4871,6 +4899,9 @@ let SingleSelectExecution = class SingleSelectExecution {
                 this.clearSelection();
                 this.selectItem(item);
             }
+            else if (item.fSelectionDisabled) {
+                this.clearSelection();
+            }
         }
         else {
             this.clearSelection();
@@ -7762,6 +7793,38 @@ class FZoomBase {
         this.fComponentsStore = fComponentsStore;
         this.isEnabled = false;
         this.listeners = EventExtensions.emptyListener();
+        this.onWheel = (event) => {
+            event.preventDefault();
+            const targetElement = event.target;
+            if (this.fComponentsStore.fDraggable?.isDragStarted || 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) => {
+            event.preventDefault();
+            const targetElement = event.target;
+            if (this.fComponentsStore.fDraggable?.isDragStarted || isNode(targetElement) || 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();
+        };
     }
     toggleZoom() {
         if (this.isEnabled) {
@@ -7776,48 +7839,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) {
-        event.preventDefault();
-        const targetElement = event.target;
-        if (this.fComponentsStore.fDraggable?.isDragStarted || 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) {
-        event.preventDefault();
-        const targetElement = event.target;
-        if (this.fComponentsStore.fDraggable?.isDragStarted || isNode(targetElement) || 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 = () => {
         };