@foblex/flow 12.6.8 → 12.7.0

package/README.md

@@ -68,7 +68,7 @@ You can also report [issues](https://github.com/Foblex/flow/issues) and request
 
 ### License
 
-This library is available for use under the [MIT License](LICENSE).
+This library is available for use under the [MIT License](./LICENSE).
 
 For more information please contact our [support](mailto:support@foblex.com).
 

package/bundles/foblex-flow.umd.js

@@ -1085,6 +1085,32 @@
       exports.UpdateScaleExecution
   ];
 
+  var AddConnectionToStoreRequest = /** @class */ (function () {
+      function AddConnectionToStoreRequest(fConnection) {
+          this.fConnection = fConnection;
+      }
+      return AddConnectionToStoreRequest;
+  }());
+
+  exports.AddConnectionToStoreExecution = /** @class */ (function () {
+      function AddConnectionToStoreExecution(fComponentsStore) {
+          this.fComponentsStore = fComponentsStore;
+      }
+      AddConnectionToStoreExecution.prototype.handle = function (request) {
+          this.fComponentsStore.fConnections.push(request.fConnection);
+          this.fComponentsStore.componentDataChanged();
+      };
+      return AddConnectionToStoreExecution;
+  }());
+  exports.AddConnectionToStoreExecution.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: exports.AddConnectionToStoreExecution, deps: [{ token: FComponentsStore }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  exports.AddConnectionToStoreExecution.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: exports.AddConnectionToStoreExecution });
+  exports.AddConnectionToStoreExecution = __decorate([
+      i2.FExecutionRegister(AddConnectionToStoreRequest)
+  ], exports.AddConnectionToStoreExecution);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: exports.AddConnectionToStoreExecution, decorators: [{
+              type: i0.Injectable
+          }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
   var FindClosestInputUsingSnapThresholdRequest = /** @class */ (function () {
       function FindClosestInputUsingSnapThresholdRequest(position, canBeConnectedInputs, snapThreshold) {
           this.position = position;
@@ -1282,10 +1308,42 @@
               type: i0.Injectable
           }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2__namespace.FMediator }]; } });
 
+  var RemoveConnectionFromStoreRequest = /** @class */ (function () {
+      function RemoveConnectionFromStoreRequest(fConnection) {
+          this.fConnection = fConnection;
+      }
+      return RemoveConnectionFromStoreRequest;
+  }());
+
+  exports.RemoveConnectionFromStoreExecution = /** @class */ (function () {
+      function RemoveConnectionFromStoreExecution(fComponentsStore) {
+          this.fComponentsStore = fComponentsStore;
+      }
+      RemoveConnectionFromStoreExecution.prototype.handle = function (request) {
+          var index = this.fComponentsStore.fConnections.indexOf(request.fConnection);
+          if (index === -1) {
+              throw new Error("Connection not found in store");
+          }
+          this.fComponentsStore.fConnections.splice(index, 1);
+          this.fComponentsStore.componentDataChanged();
+      };
+      return RemoveConnectionFromStoreExecution;
+  }());
+  exports.RemoveConnectionFromStoreExecution.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: exports.RemoveConnectionFromStoreExecution, deps: [{ token: FComponentsStore }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  exports.RemoveConnectionFromStoreExecution.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: exports.RemoveConnectionFromStoreExecution });
+  exports.RemoveConnectionFromStoreExecution = __decorate([
+      i2.FExecutionRegister(RemoveConnectionFromStoreRequest)
+  ], exports.RemoveConnectionFromStoreExecution);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: exports.RemoveConnectionFromStoreExecution, decorators: [{
+              type: i0.Injectable
+          }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
   var F_CONNECTION_FEATURES = [
+      exports.AddConnectionToStoreExecution,
       exports.FindClosestInputUsingSnapThresholdExecution,
       exports.GetAllCanBeConnectedInputPositionsExecution,
       exports.GetConnectorWithRectExecution,
+      exports.RemoveConnectionFromStoreExecution
   ];
 
   var ClearSelectionRequest = /** @class */ (function () {
@@ -1473,8 +1531,8 @@
   exports.EFConnectableSide = void 0;
   (function (EFConnectableSide) {
       EFConnectableSide["LEFT"] = "left";
-      EFConnectableSide["RIGHT"] = "right";
       EFConnectableSide["TOP"] = "top";
+      EFConnectableSide["RIGHT"] = "right";
       EFConnectableSide["BOTTOM"] = "bottom";
       EFConnectableSide["AUTO"] = "auto";
   })(exports.EFConnectableSide || (exports.EFConnectableSide = {}));
@@ -2157,6 +2215,7 @@
       FNodeInputDirective.prototype.setConnected = function (isConnected) {
           this.isConnected = isConnected;
           this.hostElement.classList.toggle('f-node-input-connected', isConnected);
+          this.hostElement.classList.toggle('f-node-input-not-connectable', !this.canBeConnected);
       };
       FNodeInputDirective.prototype.ngOnDestroy = function () {
           this.fNode.removeConnector(this);
@@ -2165,7 +2224,7 @@
       return FNodeInputDirective;
   }(FNodeInputBase));
   FNodeInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FNodeInputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-  FNodeInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fSide: ["fInputConnectableSide", "_fSide"] }, host: { properties: { "attr.data-f-input-id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0__namespace });
+  FNodeInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fSide: ["fInputConnectableSide", "_fSide"] }, host: { properties: { "attr.data-f-input-id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0__namespace });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FNodeInputDirective, decorators: [{
               type: i0.Directive,
               args: [{
@@ -2175,8 +2234,7 @@
                           '[attr.data-f-input-id]': 'id',
                           class: "f-component f-node-input",
                           '[class.f-node-input-multiple]': 'multiple',
-                          '[class.f-node-input-disabled]': 'disabled',
-                          '[class.f-node-input-not-connectable]': '!canBeConnected',
+                          '[class.f-node-input-disabled]': 'disabled'
                       },
                       providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }],
                   }]
@@ -2391,6 +2449,7 @@
       FNodeOutputDirective.prototype.setConnected = function (isConnected) {
           this.isConnected = isConnected;
           this.hostElement.classList.toggle('f-node-output-connected', isConnected);
+          this.hostElement.classList.toggle('f-node-output-not-connectable', !this.canBeConnected);
       };
       FNodeOutputDirective.prototype.ngOnDestroy = function () {
           this.fNode.removeConnector(this);
@@ -2399,7 +2458,7 @@
       return FNodeOutputDirective;
   }(FNodeOutputBase));
   FNodeOutputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FNodeOutputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-  FNodeOutputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled"], _fSide: ["fOutputConnectableSide", "_fSide"], isSelfConnectable: "isSelfConnectable" }, host: { properties: { "attr.data-f-output-id": "id", "class.f-node-output-multiple": "multiple", "class.f-node-output-disabled": "disabled", "class.f-node-output-not-connectable": "!canBeConnected", "class.f-node-output-self-connectable": "isSelfConnectable" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0__namespace });
+  FNodeOutputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled"], _fSide: ["fOutputConnectableSide", "_fSide"], isSelfConnectable: "isSelfConnectable" }, host: { properties: { "attr.data-f-output-id": "id", "class.f-node-output-multiple": "multiple", "class.f-node-output-disabled": "disabled", "class.f-node-output-self-connectable": "isSelfConnectable" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0__namespace });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FNodeOutputDirective, decorators: [{
               type: i0.Directive,
               args: [{
@@ -2410,7 +2469,6 @@
                           class: "f-component f-node-output",
                           '[class.f-node-output-multiple]': 'multiple',
                           '[class.f-node-output-disabled]': 'disabled',
-                          '[class.f-node-output-not-connectable]': '!canBeConnected',
                           '[class.f-node-output-self-connectable]': 'isSelfConnectable',
                       },
                       providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }],
@@ -3069,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;
   }());
@@ -3104,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));
@@ -4206,9 +4265,10 @@
   var uniqueId$5 = 0;
   var FConnectionComponent = /** @class */ (function (_super) {
       __extends(FConnectionComponent, _super);
-      function FConnectionComponent(elementReference, fConnectionFactory, fComponentsStore) {
+      function FConnectionComponent(elementReference, fConnectionFactory, fComponentsStore, fMediator) {
           var _this = _super.call(this, elementReference, fConnectionFactory) || this;
           _this.fComponentsStore = fComponentsStore;
+          _this.fMediator = fMediator;
           _this.fId = "f-connection-" + uniqueId$5++;
           _this._fText = '';
           _this._fStartColor = 'black';
@@ -4328,14 +4388,14 @@
           configurable: true
       });
       FConnectionComponent.prototype.ngOnInit = function () {
-          this.fComponentsStore.addComponent(this.fComponentsStore.fConnections, this);
+          this.fMediator.send(new AddConnectionToStoreRequest(this));
       };
       FConnectionComponent.prototype.ngOnDestroy = function () {
-          this.fComponentsStore.removeComponent(this.fComponentsStore.fConnections, this);
+          this.fMediator.send(new RemoveConnectionFromStoreRequest(this));
       };
       return FConnectionComponent;
   }(FConnectionBase));
-  FConnectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FConnectionComponent, deps: [{ token: i0__namespace.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  FConnectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FConnectionComponent, deps: [{ token: i0__namespace.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }, { token: i2__namespace.FMediator }], target: i0__namespace.ɵɵFactoryTarget.Component });
   FConnectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled"], fSelectionDisabled: "fSelectionDisabled" }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0__namespace, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], components: [{ type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }, { type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { type: FConnectionTextComponent, selector: "text[f-connection-text]" }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FConnectionComponent, decorators: [{
               type: i0.Component,
@@ -4353,7 +4413,7 @@
                       },
                       providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }],
                   }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }]; }, propDecorators: { fId: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }, { type: i2__namespace.FMediator }]; }, propDecorators: { fId: [{
                   type: i0.Input,
                   args: ['fConnectionId']
               }], fText: [{
@@ -5028,7 +5088,7 @@
           this.redrawConnection(this.getNewLineValue(difference));
       };
       ConnectionDragHandler.prototype.getNewLineValue = function (difference) {
-          return this.fMediator.send(new GetConnectionLineRequest(_2d.RoundedRect.fromRect(this.fOutputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), this.sourceRestrictions)), _2d.RoundedRect.fromRect(this.fInputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), this.targetRestrictions)), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
+          return this.fMediator.send(new GetConnectionLineRequest(_2d.RoundedRect.fromRoundedRect(this.fOutputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), this.sourceRestrictions)), _2d.RoundedRect.fromRoundedRect(this.fInputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), this.targetRestrictions)), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
       };
       return ConnectionDragHandler;
   }(ConnectionBaseDragHandler));
@@ -5045,7 +5105,7 @@
           this.redrawConnection(this.getNewLineValue(difference));
       };
       ConnectionTargetDragHandler.prototype.getNewLineValue = function (difference) {
-          return this.fMediator.send(new GetConnectionLineRequest(_2d.RoundedRect.fromRect(this.fOutputWithRect.fRect), _2d.RoundedRect.fromRect(this.fInputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
+          return this.fMediator.send(new GetConnectionLineRequest(_2d.RoundedRect.fromRoundedRect(this.fOutputWithRect.fRect), _2d.RoundedRect.fromRoundedRect(this.fInputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
       };
       return ConnectionTargetDragHandler;
   }(ConnectionBaseDragHandler));
@@ -5137,7 +5197,7 @@
           this.redrawConnection(this.getNewLineValue(difference));
       };
       ConnectionSourceDragHandler.prototype.getNewLineValue = function (difference) {
-          return this.fMediator.send(new GetConnectionLineRequest(_2d.RoundedRect.fromRect(this.fOutputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), _2d.RoundedRect.fromRect(this.fInputWithRect.fRect), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
+          return this.fMediator.send(new GetConnectionLineRequest(_2d.RoundedRect.fromRoundedRect(this.fOutputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), _2d.RoundedRect.fromRoundedRect(this.fInputWithRect.fRect), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
       };
       return ConnectionSourceDragHandler;
   }(ConnectionBaseDragHandler));
@@ -5899,7 +5959,8 @@
           this.fMediator.send(new ApplyParentResizeRestrictionsRequest(rect, restrictionsRect));
       };
       NodeResizeDragHandler.prototype.complete = function () {
-          this.fNode.sizeChange.emit(_2d.RectExtensions.initialize(this.fNode.position.x, this.fNode.position.y, this.fNode.size.width, this.fNode.size.height));
+          var _a, _b;
+          this.fNode.sizeChange.emit(_2d.RectExtensions.initialize(this.fNode.position.x, this.fNode.position.y, (_a = this.fNode.size) === null || _a === void 0 ? void 0 : _a.width, (_b = this.fNode.size) === null || _b === void 0 ? void 0 : _b.height));
       };
       return NodeResizeDragHandler;
   }());
@@ -8619,11 +8680,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; }
@@ -9586,6 +9654,7 @@
    * Generated bundle index. Do not edit.
    */
 
+  exports.AddConnectionToStoreRequest = AddConnectionToStoreRequest;
   exports.AddPatternToBackgroundRequest = AddPatternToBackgroundRequest;
   exports.ApplyChildResizeRestrictionsRequest = ApplyChildResizeRestrictionsRequest;
   exports.ApplyParentResizeRestrictionsRequest = ApplyParentResizeRestrictionsRequest;
@@ -9791,6 +9860,7 @@
   exports.ReassignConnectionFinalizeRequest = ReassignConnectionFinalizeRequest;
   exports.ReassignConnectionPreparationRequest = ReassignConnectionPreparationRequest;
   exports.RedrawConnectionsRequest = RedrawConnectionsRequest;
+  exports.RemoveConnectionFromStoreRequest = RemoveConnectionFromStoreRequest;
   exports.ResetScaleAndCenterRequest = ResetScaleAndCenterRequest;
   exports.ResetScaleRequest = ResetScaleRequest;
   exports.SELECTION_AREA_FINALIZE_PROVIDERS = SELECTION_AREA_FINALIZE_PROVIDERS;