@foblex/flow 1.2.8 → 1.3.0

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';
 
@@ -496,6 +496,14 @@ function getFlowUid() {
     return FLOW.UID;
 }
 
+var EFMarkerType;
+(function (EFMarkerType) {
+    EFMarkerType["START"] = "f-connection-marker-start";
+    EFMarkerType["END"] = "f-connection-marker-end";
+    EFMarkerType["SELECTED_START"] = "selected_start";
+    EFMarkerType["SELECTED_END"] = "selected_end";
+})(EFMarkerType || (EFMarkerType = {}));
+
 class FConnectionPathComponent {
     get linkToGradient() {
         return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.outputId + this.base.inputId);
@@ -517,15 +525,18 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute("d", `${path}`);
     }
     select() {
-        this.hostElement.setAttribute('marker-start', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-start-selected')})`);
-        this.hostElement.setAttribute('marker-end', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-end-selected')})`);
+        this.hostElement.setAttribute('marker-start', `url(#${this.getMarkerId(EFMarkerType.SELECTED_START)})`);
+        this.hostElement.setAttribute('marker-end', `url(#${this.getMarkerId(EFMarkerType.SELECTED_END)})`);
     }
     deselect() {
-        this.hostElement.setAttribute('marker-start', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-start-' + this.base.id)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-end-' + this.base.id)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${this.getMarkerId(EFMarkerType.START)})`);
+        this.hostElement.setAttribute('marker-end', `url(#${this.getMarkerId(EFMarkerType.END)})`);
+    }
+    getMarkerId(type) {
+        return sanitizeElementId(`${getFlowUid()}-${type}-${this.base.id}`);
     }
     isSelected() {
-        return this.hostElement.getAttribute('marker-start') === `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-start-selected')})`;
+        return this.hostElement.getAttribute('marker-start') === `url(#${this.getMarkerId(EFMarkerType.SELECTED_START)})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -900,14 +911,6 @@ function castToConnectionType(type) {
     return result;
 }
 
-var EFMarkerType;
-(function (EFMarkerType) {
-    EFMarkerType["START"] = "f-connection-marker-start";
-    EFMarkerType["END"] = "f-connection-marker-end";
-    EFMarkerType["SELECTED_START"] = "selected_start";
-    EFMarkerType["SELECTED_END"] = "selected_end";
-})(EFMarkerType || (EFMarkerType = {}));
-
 const F_MARKER = new InjectionToken('F_MARKER');
 class FMarkerBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FMarkerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2680,6 +2683,9 @@ 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);
@@ -2886,6 +2892,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) {