@foblex/flow 12.6.9 → 12.7.1

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
-  <a href="https://flow.foblex.com">
-    <img style="margin: auto" src="https://github.com/user-attachments/assets/0557914d-a43d-43c1-8346-760d3627da14" alt="Foblex Flow Logo"/>
+  <a href="https://flow.foblex.com/">
+    <img style="margin: auto" src="https://github.com/user-attachments/assets/ee1d39f6-0a89-4cb9-8dee-1652aba82e69" alt="Foblex Flow Logo"/>
   </a>
 </p>
 
@@ -15,40 +15,45 @@
 
 ## Welcome to Foblex Flow
 
-Foblex Flow is an [Angular](https://angular.dev/) library designed to simplify the creation and manipulation of
-dynamic flows. It provides components for flows, nodes, and connections, automating node
-manipulation and inter-node connections.
+Foblex Flow is an [Angular](https://angular.dev/) library built to simplify the creation and management of dynamic, interactive flows.
+Whether you're developing complex systems or lightweight visualizations, Foblex Flow provides a robust set of tools to help automate node manipulation and inter-node connections with ease. It's fully compatible with Angular 12+, Server-Side Rendering (SSR), and the Composition API.
 
 ### Examples
 
-- [Call Center](https://github.com/Foblex/f-flow-example) - A simple example of a call center flow.
+Explore practical use cases to see Foblex Flow in action:
 
-- [Scheme Editor](https://github.com/Foblex/f-scheme-editor) - A more complex example of a scheme editor.
+- [Call Center](https://github.com/Foblex/f-flow-example) - A streamlined flow example simulating a call flow.
+
+- [Scheme Editor](https://github.com/Foblex/f-scheme-editor) - A more advanced example of a fully interactive scheme editor.
+
+- [Visual Programming](https://flow.foblex.com/examples/f-visual-programming-flow/) - An example of a visual programming flow.
+
+- [DB Management](https://flow.foblex.com/examples/f-db-management-flow/) - An example of a database management flow.
 
 ### Features
 
-1. Node and Connection creation and manipulation.
-2. Connection and Node events.
-3. Reassigning Nodes and Connections.
-4. Customizable Node and Connection templates.
-5. Drag-and-drop support.
-6. Zoom and pan support.
+1. **Node and Connection Creation:** Dynamically generate and manipulate nodes and their connections.
+2. **Event-Driven Architecture:** Built-in events for nodes and connections to allow seamless interaction handling.
+3. **Reassign Connections:** Easily reassign connections between nodes, allowing for flexible flow adjustments.
+4. **Custom Templates:** Fully customizable node and connection templates for tailored visual representation.
+5. **Drag-and-Drop:** Simplified drag-and-drop functionality for intuitive flow manipulation.
+6. **Zoom and Pan Support:** Explore large flows with smooth zooming and panning controls.
 
 ### Getting Started and Documentation
 
-Visit our [Documentation](https://flow.foblex.com/docs/get-started) to learn how to install and use the library in your Angular project.
+For a comprehensive guide on how to install, configure, and use Foblex Flow in your Angular project, visit our [Documentation](https://flow.foblex.com/docs/get-started).
 
 ### Installation
 
-To add Foblex Flow to your project, run the following command:
+To add Foblex Flow to your project, use the following npm command:
 
 ```bash
 npm install @foblex/flow
 ```
 
-### Usage
+### Usage Example
 
-Example:
+Here’s a simple example of how you can use Foblex Flow to create draggable nodes and connections:
 
 ```html
 
@@ -61,7 +66,7 @@ Example:
 </f-flow>
 ```
 
-### Support and Community
+### Community and Support
 
 For questions, feedback, and support, visit the [Foblex Portal](https://flow.foblex.com) to connect with the community and the development team.
 You can also report [issues](https://github.com/Foblex/flow/issues) and request [features](https://github.com/Foblex/flow/discussions) on the [GitHub repository](https://github.com/Foblex/flow).

package/bundles/foblex-flow.umd.js

@@ -3127,11 +3127,12 @@
   }());
 
   var FReassignConnectionEvent = /** @class */ (function () {
-      function FReassignConnectionEvent(fConnectionId, fOutputId, oldFInputId, newFInputId) {
+      function FReassignConnectionEvent(fConnectionId, fOutputId, oldFInputId, newFInputId, fDropPosition) {
           this.fConnectionId = fConnectionId;
           this.fOutputId = fOutputId;
           this.oldFInputId = oldFInputId;
           this.newFInputId = newFInputId;
+          this.fDropPosition = fDropPosition;
       }
       return FReassignConnectionEvent;
   }());
@@ -3162,10 +3163,10 @@
       };
       ReassignConnectionFinalizeExecution.prototype.emitEvent = function (event) {
           var 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()));
       };
       ReassignConnectionFinalizeExecution.prototype.getInputUnderPointer = function (event) {
           return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
@@ -3604,7 +3605,7 @@
       FConnectionTextPathDirective.prototype.getSymbolWidth = function (name) {
           var text = name || 'connection';
           var _a = this.getFontStyles(this.hostElement), fontFamily = _a.fontFamily, fontSize = _a.fontSize;
-          this.fontSize = fontSize;
+          this.fontSize = fontSize || '12px';
           var canvas = this.fBrowser.document.createElement('canvas');
           var context;
           try {
@@ -5048,11 +5049,22 @@
       };
       ConnectionBaseDragHandler.prototype.getOutput = function () {
           var _this = this;
-          return this.fComponentsStore.fOutputs.find(function (x) { return x.id === _this.connection.fOutputId; });
+          var result = this.fComponentsStore.fOutputs.find(function (x) { return x.id === _this.connection.fOutputId; });
+          if (!result) {
+              throw new Error(this.connectorNotFoundPrefix("fOutput with id " + this.connection.fOutputId + " not found"));
+          }
+          return result;
       };
       ConnectionBaseDragHandler.prototype.getInput = function () {
           var _this = this;
-          return this.fComponentsStore.fInputs.find(function (x) { return x.id === _this.connection.fInputId; });
+          var result = this.fComponentsStore.fInputs.find(function (x) { return x.id === _this.connection.fInputId; });
+          if (!result) {
+              throw new Error(this.connectorNotFoundPrefix("fInput with id " + this.connection.fInputId + " not found"));
+          }
+          return result;
+      };
+      ConnectionBaseDragHandler.prototype.connectorNotFoundPrefix = function (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";
       };
       ConnectionBaseDragHandler.prototype.getDifference = function (difference, restrictions) {
           return {
@@ -5312,7 +5324,8 @@
   };
 
   var CreateMoveNodesDragModelFromSelectionRequest = /** @class */ (function () {
-      function CreateMoveNodesDragModelFromSelectionRequest() {
+      function CreateMoveNodesDragModelFromSelectionRequest(nodeWithDisabledSelection) {
+          this.nodeWithDisabledSelection = nodeWithDisabledSelection;
       }
       return CreateMoveNodesDragModelFromSelectionRequest;
   }());
@@ -5371,14 +5384,18 @@
           this.fMediator = fMediator;
       }
       CreateMoveNodesDragModelFromSelectionExecution.prototype.handle = function (request) {
-          var itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes());
+          var itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes(request.nodeWithDisabledSelection));
           return this.getDragHandlersWithConnections(this.getDragHandlersFromNodes(itemsToDrag), this.getAllOutputIds(itemsToDrag), this.getAllInputIds(itemsToDrag));
       };
-      CreateMoveNodesDragModelFromSelectionExecution.prototype.getSelectedNodes = function () {
+      CreateMoveNodesDragModelFromSelectionExecution.prototype.getSelectedNodes = function (nodeWithDisabledSelection) {
           var _this = this;
-          return this.fDraggableDataContext.selectedItems
+          var result = this.fDraggableDataContext.selectedItems
               .map(function (x) { return _this.fComponentsStore.findNode(x.hostElement); })
               .filter(function (x) { return !!x; });
+          if (nodeWithDisabledSelection) {
+              result.push(nodeWithDisabledSelection);
+          }
+          return result;
       };
       CreateMoveNodesDragModelFromSelectionExecution.prototype.getNodesWithRestrictions = function (selectedNodes) {
           var _this = this;
@@ -5474,22 +5491,32 @@
           configurable: true
       });
       NodeMovePreparationExecution.prototype.handle = function (request) {
-          this.selectAndUpdateNodeLayer(request.event.targetElement);
-          var itemsToDrag = this.createDragModelFromSelection();
+          var node = this.getNode(request.event.targetElement);
+          if (!node) {
+              throw new Error('Node not found');
+          }
+          var 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 = _2d.Point.fromPoint(request.event.getPosition())
               .elementTransform(this.flowHost).div(this.transform.scale);
           this.fDraggableDataContext.draggableItems = itemsToDrag;
       };
-      NodeMovePreparationExecution.prototype.selectAndUpdateNodeLayer = function (targetElement) {
-          this.fMediator.send(new SelectAndUpdateNodeLayerRequest(this.getNode(targetElement)));
+      NodeMovePreparationExecution.prototype.selectAndUpdateNodeLayer = function (node) {
+          this.fMediator.send(new SelectAndUpdateNodeLayerRequest(node));
       };
       NodeMovePreparationExecution.prototype.getNode = function (targetElement) {
           return this.fComponentsStore.findNode(targetElement);
       };
-      NodeMovePreparationExecution.prototype.createDragModelFromSelection = function () {
-          return this.fMediator.send(new CreateMoveNodesDragModelFromSelectionRequest());
+      NodeMovePreparationExecution.prototype.createDragModelFromSelection = function (nodeWithDisabledSelection) {
+          return this.fMediator.send(new CreateMoveNodesDragModelFromSelectionRequest(nodeWithDisabledSelection));
       };
       NodeMovePreparationExecution.prototype.initializeLineAlignment = function (nodesToDrag) {
           var _a;
@@ -6133,6 +6160,9 @@
                   this.clearSelection();
                   this.selectItem(item);
               }
+              else if (item.fSelectionDisabled) {
+                  this.clearSelection();
+              }
           }
           else {
               this.clearSelection();
@@ -8679,11 +8709,18 @@
       FCanvasComponent.prototype.redrawWithAnimation = function () {
           var _this = this;
           var _a;
+          var 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: " + _2d.TransformModelExtensions.toString(this.transform));
-          setTimeout(function () {
-              _this.redraw();
-          }, F_CANVAS_ANIMATION_DURATION);
+          this.hostElement.setAttribute("style", "transition: transform " + duration + "ms ease-in-out; transform: " + _2d.TransformModelExtensions.toString(this.transform));
+          setTimeout(function () { return _this.redraw(); }, F_CANVAS_ANIMATION_DURATION);
+      };
+      FCanvasComponent.prototype.isMobile = function () {
+          // @ts-ignore
+          var userAgent = navigator.userAgent || navigator.vendor || window['opera'];
+          return /android|iPad|iPhone|iPod/i.test(userAgent);
       };
       FCanvasComponent.prototype.centerGroupOrNode = function (id, animated) {
           if (animated === void 0) { animated = true; }
@@ -9448,9 +9485,44 @@
   var F_ZOOM = new i0.InjectionToken('F_ZOOM');
   var FZoomBase = /** @class */ (function () {
       function FZoomBase(fComponentsStore) {
+          var _this = this;
           this.fComponentsStore = fComponentsStore;
           this.isEnabled = false;
           this.listeners = dragToolkit.EventExtensions.emptyListener();
+          this.onWheel = function (event) {
+              var _a;
+              event.preventDefault();
+              var 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;
+              }
+              var result = _this.getScale();
+              var direction = event.deltaY > 0 ? -1 : 1;
+              var step = _this.step;
+              result = result + step * direction;
+              result = Math.max(_this.minimum, Math.min(result, _this.maximum));
+              var pointerPositionInFlow = new _2d.Point(event.clientX, event.clientY).elementTransform(_this.flowHost);
+              _this.fCanvas.setZoom(result, pointerPositionInFlow);
+              _this.fCanvas.redraw();
+              _this.fCanvas.emitCanvasChangeEvent();
+          };
+          this.onDoubleClick = function (event) {
+              var _a;
+              event.preventDefault();
+              var 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;
+              }
+              var result = _this.getScale();
+              var direction = 1;
+              var step = _this.dblClickStep;
+              result = result + step * direction;
+              result = Math.max(_this.minimum, Math.min(result, _this.maximum));
+              var pointerPositionInFlow = new _2d.Point(event.clientX, event.clientY).elementTransform(_this.flowHost);
+              _this.fCanvas.setZoom(result, pointerPositionInFlow);
+              _this.fCanvas.redrawWithAnimation();
+              _this.fCanvas.emitCanvasChangeEvent();
+          };
       }
       Object.defineProperty(FZoomBase.prototype, "flowHost", {
           get: function () {
@@ -9480,50 +9552,16 @@
           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 = function () {
-              _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);
           };
       };
       FZoomBase.prototype.getScale = function () {
           return this.fCanvas.transform.scale || 1;
       };
-      FZoomBase.prototype.onWheel = function (event) {
-          var _a;
-          event.preventDefault();
-          var 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;
-          }
-          var result = this.getScale();
-          var direction = event.deltaY > 0 ? -1 : 1;
-          var step = this.step;
-          result = result + step * direction;
-          result = Math.max(this.minimum, Math.min(result, this.maximum));
-          var pointerPositionInFlow = new _2d.Point(event.clientX, event.clientY).elementTransform(this.flowHost);
-          this.fCanvas.setZoom(result, pointerPositionInFlow);
-          this.fCanvas.redraw();
-          this.fCanvas.emitCanvasChangeEvent();
-      };
-      FZoomBase.prototype.onDoubleClick = function (event) {
-          var _a;
-          event.preventDefault();
-          var 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;
-          }
-          var result = this.getScale();
-          var direction = 1;
-          var step = this.dblClickStep;
-          result = result + step * direction;
-          result = Math.max(this.minimum, Math.min(result, this.maximum));
-          var pointerPositionInFlow = new _2d.Point(event.clientX, event.clientY).elementTransform(this.flowHost);
-          this.fCanvas.setZoom(result, pointerPositionInFlow);
-          this.fCanvas.redrawWithAnimation();
-          this.fCanvas.emitCanvasChangeEvent();
-      };
       FZoomBase.prototype.onZoomToCenter = function (deltaY, position) {
           var preventDefault = function () {
           };