@foblex/flow 1.2.9 → 1.3.1

package/f-draggable/index.d.ts

@@ -9,4 +9,5 @@ export * from './e-draggable-type';
 export * from './f-draggable.directive';
 export * from './f-draggable-base';
 export * from './f-draggable-data-context';
+export * from './i-drag-and-drop-base';
 export * from './i-draggable-item';

package/fesm2022/foblex-flow.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, ContentChildren, EventEmitter, Output, Optional, SkipSelf, HostBinding, NgModule } from '@angular/core';
-import { TransformModelExtensions, DomElementExtensions, RectExtensions, sanitizeElementId, PointExtensions, Point, GuidExtensions, VectorExtensions, SizeExtensions, MouseEventExtensions, IDragAndDropBase, BooleanExtensions, EventExtensions } from '@foblex/core';
+import { TransformModelExtensions, DomElementExtensions, RectExtensions, sanitizeElementId, PointExtensions, Point, GuidExtensions, VectorExtensions, SizeExtensions, MouseEventExtensions, EventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent, BooleanExtensions } from '@foblex/core';
 import { Subject, Subscription, Observable, startWith, debounceTime } from 'rxjs';
 import { DOCUMENT, CommonModule } from '@angular/common';
 
@@ -1410,6 +1410,7 @@ class CanvasDragHandler {
 class FDraggableDataContext {
     constructor() {
         this.selectedItems = [];
+        this.isSelectedChanged = false;
         this.onPointerDownScale = 1;
         this.onPointerDownPosition = new Point(0, 0);
         this.draggableItems = [];
@@ -1418,6 +1419,7 @@ class FDraggableDataContext {
         this.draggableItems = [];
         this.onPointerDownScale = 1;
         this.onPointerDownPosition = new Point(0, 0);
+        this.isSelectedChanged = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext }); }
@@ -2606,6 +2608,7 @@ class NodePrepareDragSequence {
                 if (!this.fDraggableDataContext.selectedItems.includes(node)) {
                     this.fDraggableDataContext.selectedItems.push(node);
                     node.select();
+                    this.fDraggableDataContext.isSelectedChanged = true;
                 }
                 this.updateNodeLayerHandler.handle(node);
                 const itemsToDrag = this.calculateDraggableConnectionsAndNodes();
@@ -2683,13 +2686,23 @@ class SingleSelectOnPointerDown {
         this.getConnectionHandler = getConnectionHandler;
     }
     handle(event) {
+        if (!this.fComponentsStore.fFlow?.hostElement.contains(event.targetElement)) {
+            return;
+        }
         const node = this.fComponentsStore.findNode(event.targetElement);
         const connection = this.getConnectionHandler.handle(event.targetElement);
         this.deselectAll(node, event);
+        let element;
+        if (this.fDraggableDataContext.selectedItems.length) {
+            element = this.fDraggableDataContext.selectedItems[0];
+        }
         this.resetSelectionIfNotMultiselect(event);
         if (node) {
             if (!this.fDraggableDataContext.selectedItems.includes(node)) {
                 this.fDraggableDataContext.selectedItems.push(node);
+                if (element?.hostElement.id !== node.hostElement.id) {
+                    this.fDraggableDataContext.isSelectedChanged = true;
+                }
             }
             else {
                 this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(node), 1);
@@ -2698,6 +2711,9 @@ class SingleSelectOnPointerDown {
         else if (connection) {
             if (!this.fDraggableDataContext.selectedItems.includes(connection)) {
                 this.fDraggableDataContext.selectedItems.push(connection);
+                if (element?.hostElement.id !== connection.hostElement.id) {
+                    this.fDraggableDataContext.isSelectedChanged = true;
+                }
             }
             else {
                 this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(connection), 1);
@@ -2835,6 +2851,9 @@ class SelectionAreaDragHandle {
     complete() {
         this.fDraggableDataContext.fSelectionArea?.hide();
         this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
+        if (this.selectedByMove.length > 0) {
+            this.fDraggableDataContext.isSelectedChanged = true;
+        }
     }
 }
 
@@ -2889,6 +2908,152 @@ const SELECTION_AREA_PROVIDERS = [
     SelectionAreaOnPointerUp,
 ];
 
+const MOUSE_EVENT_IGNORE_TIME = 800;
+class IDragAndDropBase {
+    isSyntheticEvent(event) {
+        const isSyntheticEvent = !!this.lastTouchEventTime &&
+            (this.lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now());
+        return isSyntheticEvent;
+    }
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.mouseListeners = EventExtensions.emptyListener();
+        this.touchListeners = EventExtensions.emptyListener();
+        this.startListeners = EventExtensions.emptyListener();
+        this.lastTouchEventTime = 0;
+        this.isDragStarted = false;
+        this.dragStartThreshold = 5;
+        this.dragStartDelay = 0;
+        this.dragStartTime = 0;
+        this.dragStartPosition = PointExtensions.initialize();
+        this.moveHandler = this.checkDragSequenceToStart;
+        this.onMouseDown = (event) => {
+            const isSyntheticEvent = this.isSyntheticEvent(event);
+            const isFakeEvent = isFakeMousedownFromScreenReader(event);
+            const mouseEvent = new IMouseEvent(event);
+            if (isSyntheticEvent || isFakeEvent || this.disabled) {
+                return;
+            }
+            let result = this.onPointerDown(mouseEvent);
+            if (result) {
+                this.dragStartTime = Date.now();
+                this.dragStartPosition = mouseEvent.getPosition();
+                this.ngZone.runOutsideAngular(() => {
+                    this.element.addEventListener('mousemove', this.onMouseMove);
+                    this.element.addEventListener('mouseup', this.onMouseUp);
+                });
+                this.mouseListeners = () => {
+                    this.element.removeEventListener('mousemove', this.onMouseMove);
+                    this.element.removeEventListener('mouseup', this.onMouseUp);
+                };
+            }
+        };
+        this.onTouchDown = (event) => {
+            const isFakeEvent = isFakeTouchstartFromScreenReader(event);
+            const touchEvent = new ITouchDownEvent(event);
+            if (isFakeEvent || this.disabled) {
+                return;
+            }
+            let result = this.onPointerDown(new ITouchDownEvent(event));
+            if (result) {
+                this.dragStartTime = Date.now();
+                this.dragStartPosition = touchEvent.getPosition();
+                this.ngZone.runOutsideAngular(() => {
+                    this.element.addEventListener('touchmove', this.onTouchMove);
+                    this.element.addEventListener('touchend', this.onTouchUp);
+                });
+                this.touchListeners = () => {
+                    this.element.removeEventListener('touchmove', this.onTouchMove);
+                    this.element.removeEventListener('touchend', this.onTouchUp);
+                };
+            }
+        };
+        this.onMouseMove = (event) => {
+            this.moveHandler(new IMouseEvent(event));
+        };
+        this.onTouchMove = (event) => {
+            this.moveHandler(new ITouchMoveEvent(event));
+        };
+        this.onMouseUp = (event) => {
+            if (this.isDragStarted) {
+                this.onPointerUp(new IMouseEvent(event));
+            }
+            this.endDragSequence();
+        };
+        this.onTouchUp = (event) => {
+            if (this.isDragStarted) {
+                this.onPointerUp(new ITouchUpEvent(event));
+            }
+            this.endDragSequence();
+        };
+    }
+    checkDragSequenceToStart(event) {
+        const pointerPosition = event.getPosition();
+        if (!this.isDragStarted) {
+            const distanceX = Math.abs(pointerPosition.x - this.dragStartPosition.x);
+            const distanceY = Math.abs(pointerPosition.y - this.dragStartPosition.y);
+            const isOverThreshold = distanceX + distanceY >= this.dragStartThreshold;
+            if (isOverThreshold) {
+                const isDelayElapsed = Date.now() >= this.dragStartTime + this.dragStartDelay;
+                if (!isDelayElapsed) {
+                    this.endDragSequence();
+                    return;
+                }
+                event.preventDefault();
+                this.prepareDragSequence(event);
+                this.isDragStarted = true;
+                this.moveHandler = this.onPointerMove;
+                if (isTouchEvent(event.originalEvent)) {
+                    this.lastTouchEventTime = Date.now();
+                }
+            }
+        }
+    }
+    endDragSequence() {
+        this.isDragStarted = false;
+        this.moveHandler = this.checkDragSequenceToStart;
+        this.mouseListeners();
+        this.mouseListeners = EventExtensions.emptyListener();
+        this.touchListeners();
+        this.touchListeners = EventExtensions.emptyListener();
+    }
+    subscribe(elementToSubscribe) {
+        if (this.element) {
+            this.unsubscribe();
+        }
+        this.element = elementToSubscribe;
+        this.ngZone.runOutsideAngular(() => {
+            this.element.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
+            this.element.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+        });
+        this.startListeners = () => {
+            this.element.removeEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
+            this.element.removeEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+        };
+    }
+    unsubscribe() {
+        this.startListeners();
+        this.startListeners = EventExtensions.emptyListener();
+        this.touchListeners();
+        this.touchListeners = EventExtensions.emptyListener();
+        this.mouseListeners();
+        this.mouseListeners = EventExtensions.emptyListener();
+    }
+}
+function isTouchEvent(event) {
+    return event.type[0] === 't';
+}
+function isFakeMousedownFromScreenReader(event) {
+    return event.buttons === 0 || (event.offsetX === 0 && event.offsetY === 0);
+}
+function isFakeTouchstartFromScreenReader(event) {
+    const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
+    return (!!touch &&
+        touch.identifier === -1 &&
+        (touch.radiusX == null || touch.radiusX === 1) &&
+        (touch.radiusY == null || touch.radiusY === 1));
+}
+
 const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
 class FDraggableBase extends IDragAndDropBase {
     constructor(ngZone) {
@@ -2967,6 +3132,9 @@ class FDraggableDirective extends FDraggableBase {
         this.fDraggableDataContext.reset();
     }
     emitSelectionChangeEvent() {
+        if (!this.fDraggableDataContext.isSelectedChanged) {
+            return;
+        }
         let selectedNodes = [];
         let selectedConnections = [];
         this.fDraggableDataContext.selectedItems.forEach((x) => {
@@ -3031,6 +3199,7 @@ class SelectAllHandler {
             x.select();
             this.fDraggableDataContext.selectedItems.push(x);
         });
+        this.fDraggableDataContext.isSelectedChanged = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectAllHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectAllHandler }); }