@foblex/flow 17.5.6 → 17.5.8

package/fesm2022/foblex-flow.mjs

@@ -7242,6 +7242,9 @@ class EventExtensions {
     static passiveListener() {
         return EventExtensions.passiveEventListener({ passive: true });
     }
+    static activeCaptureListener() {
+        return EventExtensions.passiveEventListener({ passive: false, capture: true });
+    }
     static emptyListener() {
         return () => {
         };
@@ -7274,10 +7277,10 @@ class DragAndDropBase {
         const isSyntheticEvent = this.isSyntheticEvent(event);
         const isFakeEvent = isFakeMousedownFromScreenReader(event);
         const mouseEvent = new IMouseEvent(event);
-        this.pointerDownElement = mouseEvent.targetElement;
-        if (isSyntheticEvent || isFakeEvent || this.disabled) {
+        if (isSyntheticEvent || isFakeEvent || this.disabled || this.isDragStarted) {
             return;
         }
+        this.pointerDownElement = mouseEvent.targetElement;
         let result = this.onPointerDown(mouseEvent);
         if (result) {
             this.dragStartTime = Date.now();
@@ -7286,21 +7289,25 @@ class DragAndDropBase {
                 this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                 this.document?.addEventListener('mousemove', this.onMouseMove);
                 this.document?.addEventListener('pointerup', this.onPointerUpEvent);
+                this.document?.addEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this.document?.addEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
             });
             this.mouseListeners = () => {
                 this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                 this.document?.removeEventListener('mousemove', this.onMouseMove);
                 this.document?.removeEventListener('pointerup', this.onPointerUpEvent);
+                this.document?.removeEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this.document?.removeEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
             };
         }
     };
     onTouchDown = (event) => {
         const isFakeEvent = isFakeTouchstartFromScreenReader(event);
         const touchEvent = new ITouchDownEvent(event);
-        this.pointerDownElement = touchEvent.targetElement;
-        if (isFakeEvent || this.disabled) {
+        if (isFakeEvent || this.disabled || this.isDragStarted) {
             return;
         }
+        this.pointerDownElement = touchEvent.targetElement;
         let result = this.onPointerDown(touchEvent);
         if (result) {
             this.dragStartTime = Date.now();
@@ -7309,11 +7316,15 @@ class DragAndDropBase {
                 this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                 this.document?.addEventListener('touchmove', this.onTouchMove);
                 this.document?.addEventListener('pointerup', this.onPointerUpEvent);
+                this.document?.addEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this.document?.addEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
             });
             this.touchListeners = () => {
                 this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                 this.document?.removeEventListener('touchmove', this.onTouchMove);
                 this.document?.removeEventListener('pointerup', this.onPointerUpEvent);
+                this.document?.removeEventListener('pointercancel', this.onPointerUpEvent, EventExtensions.activeCaptureListener());
+                this.document?.removeEventListener('contextmenu', this.onContextMenuDuringDrag, EventExtensions.activeCaptureListener());
             };
         }
     };
@@ -7387,6 +7398,11 @@ class DragAndDropBase {
         this.mouseListeners();
         this.mouseListeners = EventExtensions.emptyListener();
     }
+    onContextMenuDuringDrag = (e) => {
+        if (this.isDragStarted) {
+            e.preventDefault();
+        }
+    };
 }
 function isTouchEvent(event) {
     return event.type[0] === 't';
@@ -10082,6 +10098,8 @@ class FCanvasChangeEvent {
 const F_CANVAS = new InjectionToken('F_CANVAS');
 class FCanvasBase {
     transform = TransformModelExtensions.default();
+    _fCanvasChange = new FChannel();
+    _destroyRef = inject(DestroyRef);
     getPosition() {
         return this.transform.position;
     }
@@ -10089,7 +10107,12 @@ class FCanvasBase {
         this.transform.position = position;
     }
     emitCanvasChangeEvent() {
-        this.fCanvasChange.emit(new FCanvasChangeEvent(PointExtensions.sum(this.transform.position, this.transform.scaledPosition), this.transform.scale));
+        this._fCanvasChange.notify();
+    }
+    subscribeOnCanvasChange() {
+        new FChannelHub(this._fCanvasChange).pipe(debounceTime(this.debounce())).listen(this._destroyRef, () => {
+            this.fCanvasChange.emit(new FCanvasChangeEvent(PointExtensions.sum(this.transform.position, this.transform.scaledPosition), this.transform.scale));
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FCanvasBase, ngImport: i0 });
@@ -10106,6 +10129,8 @@ class FCanvasComponent extends FCanvasBase {
     fCanvasChange = output();
     position = input(PointExtensions.initialize(), { transform: PointExtensions.castToPoint });
     scale = input(1, { transform: numberAttribute });
+    debounceTime = input(0, { transform: numberAttribute });
+    debounce = computed(() => this.debounceTime() < 0 ? 0 : this.debounceTime());
     get hostElement() {
         return this._elementReference.nativeElement;
     }
@@ -10120,6 +10145,7 @@ class FCanvasComponent extends FCanvasBase {
         this._fMediator.execute(new AddCanvasToStoreRequest(this));
         this._positionChange();
         this._scaleChange();
+        super.subscribeOnCanvasChange();
     }
     _positionChange() {
         effect(() => {
@@ -10175,7 +10201,7 @@ class FCanvasComponent extends FCanvasBase {
         this._fMediator.execute(new RemoveCanvasFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCanvasComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: FCanvasComponent, isStandalone: true, selector: "f-canvas", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: FCanvasComponent, isStandalone: true, selector: "f-canvas", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
             { provide: F_CANVAS, useExisting: FCanvasComponent }
         ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></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}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }