ngx-vflow 0.7.0 → 0.9.0

package/lib/vflow/components/node/node.component.d.ts

@@ -9,11 +9,11 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     private handleService;
     private draggableService;
     private flowStatusService;
-    private flowEntitiesService;
     private nodeRenderingService;
     private flowSettingsService;
     private selectionService;
     private hostRef;
+    private connectionController;
     nodeModel: NodeModel;
     nodeHtmlTemplate?: TemplateRef<any>;
     nodeContentRef: ElementRef<SVGGraphicsElement>;
@@ -21,23 +21,15 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy,
     protected showMagnet: import("@angular/core").Signal<boolean>;
     protected styleWidth: import("@angular/core").Signal<string>;
     protected styleHeight: import("@angular/core").Signal<string>;
-    private subscription;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     protected startConnection(event: Event, handle: HandleModel): void;
-    protected endConnection(): void;
-    /**
-     * TODO srp
-     */
-    protected validateTargetHandle(targetHandle: HandleModel): void;
-    /**
-     * TODO srp
-     */
-    protected resetValidateTargetHandle(targetHandle: HandleModel): void;
+    protected validateConnection(handle: HandleModel): void;
+    protected resetValidateConnection(targetHandle: HandleModel): void;
+    protected endConnection(handle: HandleModel): void;
     protected pullNode(): void;
     protected selectNode(): void;
-    private setInitialHandles;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NodeComponent, "g[node]", never, { "nodeModel": { "alias": "nodeModel"; "required": false; }; "nodeHtmlTemplate": { "alias": "nodeHtmlTemplate"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/vflow/components/vflow/vflow.component.d.ts

@@ -12,6 +12,8 @@ import { ConnectionModel } from '../../models/connection.model';
 import { NodeChange } from '../../types/node-change.type';
 import { EdgeChange } from '../../types/edge-change.type';
 import { Background } from '../../types/background.type';
+import { SpacePointContextDirective } from '../../directives/space-point-context.directive';
+import { FitViewOptions } from '../../interfaces/fit-view-options.interface';
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/connection-controller.directive";
 import * as i2 from "../../directives/changes-controller.directive";
@@ -39,11 +41,11 @@ export declare class VflowComponent {
     /**
      * Minimum zoom value
      */
-    minZoom: number;
+    set minZoom(value: number);
     /**
      * Maximum zoom value
      */
-    maxZoom: number;
+    set maxZoom(value: number);
     /**
      * Object that controls flow direction.
      *
@@ -89,6 +91,7 @@ export declare class VflowComponent {
     protected edgeLabelHtmlDirective?: EdgeLabelHtmlTemplateDirective;
     protected connectionTemplateDirective?: ConnectionTemplateDirective;
     protected mapContext: MapContextDirective;
+    protected spacePointContext: SpacePointContextDirective;
     /**
      * Signal for reading viewport change
      */
@@ -113,8 +116,6 @@ export declare class VflowComponent {
      * Observable with edges change
      */
     readonly edgesChange$: import("rxjs").Observable<EdgeChange[]>;
-    protected flowWidth: Signal<string | number>;
-    protected flowHeight: Signal<string | number>;
     protected markers: Signal<Map<number, import("ngx-vflow").Marker>>;
     /**
      * Change viewport to specified state
@@ -134,6 +135,7 @@ export declare class VflowComponent {
      * @param point point where to move
      */
     panTo(point: Point): void;
+    fitView(options?: FitViewOptions): void;
     /**
      * Get node by id
      *
@@ -144,6 +146,10 @@ export declare class VflowComponent {
      * Sync method to get detached edges
      */
     getDetachedEdges(): Edge[];
+    /**
+     * Convert point received from document to point on the flow
+     */
+    documentPointToFlowPoint(point: Point): Point;
     protected trackNodes(idx: number, { node }: NodeModel): Node<unknown>;
     protected trackEdges(idx: number, { edge }: EdgeModel): Edge<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<VflowComponent, never>;

package/lib/vflow/directives/connection-controller.directive.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import { Connection } from '../interfaces/connection.interface';
+import { HandleModel } from '../models/handle.model';
 import * as i0 from "@angular/core";
 export declare class ConnectionControllerDirective {
     /**
@@ -14,6 +15,11 @@ export declare class ConnectionControllerDirective {
     private statusService;
     private flowEntitiesService;
     protected connectEffect: import("@angular/core").EffectRef;
+    protected isStrictMode: import("@angular/core").Signal<boolean>;
+    startConnection(handle: HandleModel): void;
+    validateConnection(handle: HandleModel): void;
+    resetValidateConnection(targetHandle: HandleModel): void;
+    endConnection(handle: HandleModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionControllerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionControllerDirective, "[connectionController]", never, {}, { "onConnect": "onConnect"; }, never, never, true, never>;
 }

package/lib/vflow/directives/flow-size-controller.directive.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class FlowSizeControllerDirective {
+    private host;
+    private flowSettingsService;
+    flowWidth: string | number;
+    flowHeight: string | number;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlowSizeControllerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FlowSizeControllerDirective, "svg[flowSizeController]", never, {}, {}, never, never, false, never>;
+}

package/lib/vflow/directives/map-context.directive.d.ts

@@ -2,14 +2,14 @@ import { OnInit } from '@angular/core';
 import { ZoomBehavior } from 'd3-zoom';
 import { ViewportService } from '../services/viewport.service';
 import { SelectionService, ViewportForSelection } from '../services/selection.service';
+import { FlowSettingsService } from '../services/flow-settings.service';
 import * as i0 from "@angular/core";
 export declare class MapContextDirective implements OnInit {
-    minZoom: number;
-    maxZoom: number;
     protected rootSvg: SVGSVGElement;
     protected host: SVGGElement;
     protected selectionService: SelectionService;
     protected viewportService: ViewportService;
+    protected flowSettingsService: FlowSettingsService;
     protected rootSvgSelection: import("d3-selection").Selection<SVGSVGElement, unknown, null, undefined>;
     protected zoomableSelection: import("d3-selection").Selection<SVGGElement, unknown, null, undefined>;
     protected viewportForSelection: Partial<ViewportForSelection>;
@@ -20,5 +20,11 @@ export declare class MapContextDirective implements OnInit {
     private onD3zoomStart;
     private onD3zoomEnd;
     static ɵfac: i0.ɵɵFactoryDeclaration<MapContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MapContextDirective, "g[mapContext]", never, { "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MapContextDirective, "g[mapContext]", never, {}, {}, never, never, false, never>;
+}
+declare module 'd3-selection' {
+    interface Selection<GElement extends BaseType, Datum, PElement extends BaseType, PDatum> {
+        transition(): Selection<GElement, Datum, PElement, PDatum>;
+        duration(duration: number): Selection<GElement, Datum, PElement, PDatum>;
+    }
 }

package/lib/vflow/directives/space-point-context.directive.d.ts

@@ -19,6 +19,7 @@ export declare class SpacePointContextDirective {
         target: Element | null;
         originalEvent: TouchEvent;
     } | undefined>;
+    documentPointToFlowPoint(documentPoint: Point): DOMPoint;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpacePointContextDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SpacePointContextDirective, "g[spacePointContext]", never, {}, {}, never, never, false, never>;
 }

package/lib/vflow/interfaces/box.d.ts

@@ -0,0 +1,6 @@
+export interface Box {
+    x: number;
+    y: number;
+    x2: number;
+    y2: number;
+}

package/lib/vflow/interfaces/connection-settings.interface.d.ts

@@ -1,3 +1,4 @@
+import { ConnectionMode } from "../types/connection-mode.type";
 import { Connection } from "./connection.interface";
 import { Curve, EdgeType } from "./edge.interface";
 import { Marker } from "./marker.interface";
@@ -7,4 +8,5 @@ export interface ConnectionSettings {
     type?: EdgeType;
     validator?: ConnectionValidatorFn;
     marker?: Marker;
+    mode?: ConnectionMode;
 }

package/lib/vflow/interfaces/connection.internal.interface.d.ts

@@ -0,0 +1,8 @@
+import { HandleModel } from "../models/handle.model";
+import { NodeModel } from "../models/node.model";
+export interface ConnectionInternal {
+    source: NodeModel;
+    target: NodeModel;
+    sourceHandle: HandleModel;
+    targetHandle: HandleModel;
+}

package/lib/vflow/interfaces/fit-view-options.interface.d.ts

@@ -0,0 +1,15 @@
+export interface FitViewOptions {
+    /**
+     * Padding for viewport
+     */
+    padding?: number;
+    /**
+     * Duration of animated transition to new viewport
+     */
+    duration?: number;
+    /**
+     * Nodes that should be visible after fitView.
+     * The whole flow will be visible if not passed or passed an empty array
+     */
+    nodes?: string[];
+}

package/lib/vflow/interfaces/rect.d.ts

@@ -0,0 +1,6 @@
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}

package/lib/vflow/interfaces/viewport.interface.d.ts

@@ -6,4 +6,5 @@ export interface ViewportState extends Point {
 export interface WritableViewport {
     changeType: ViewportChangeType;
     state: Partial<ViewportState>;
+    duration: number;
 }

package/lib/vflow/models/connection.model.d.ts

@@ -1,9 +1,12 @@
 import { ConnectionSettings, ConnectionValidatorFn } from "../interfaces/connection-settings.interface";
 import { Curve, EdgeType } from "../interfaces/edge.interface";
+import { ConnectionMode } from "../types/connection-mode.type";
 export declare class ConnectionModel {
-    connection: ConnectionSettings;
+    settings: ConnectionSettings;
     curve: Curve;
     type: EdgeType;
     validator: ConnectionValidatorFn;
-    constructor(connection: ConnectionSettings);
+    mode: ConnectionMode;
+    constructor(settings: ConnectionSettings);
+    private getValidators;
 }

package/lib/vflow/models/edge.model.d.ts

@@ -14,7 +14,23 @@ export declare class EdgeModel implements FlowEntity {
     selected$: import("rxjs").Observable<boolean>;
     detached: import("@angular/core").Signal<boolean>;
     detached$: import("rxjs").Observable<boolean>;
-    path: import("@angular/core").Signal<import("../interfaces/path-data.interface").PathData>;
+    path: import("@angular/core").Signal<{
+        path: string;
+        points: {
+            start: {
+                x: number;
+                y: number;
+            };
+            center: {
+                x: number;
+                y: number;
+            };
+            end: {
+                x: number;
+                y: number;
+            };
+        };
+    }>;
     edgeLabels: {
         [position in EdgeLabelPosition]?: EdgeLabelModel;
     };

package/lib/vflow/models/handle.model.d.ts

@@ -3,7 +3,7 @@ import { NodeModel } from "./node.model";
 export type HandleState = 'valid' | 'invalid' | 'idle';
 export declare class HandleModel {
     rawHandle: NodeHandle;
-    private parentNode;
+    parentNode: NodeModel;
     readonly strokeWidth = 2;
     /**
      * Pre-computed size for default handle, changed dynamically

package/lib/vflow/services/flow-settings.service.d.ts

@@ -13,8 +13,16 @@ export declare class FlowSettingsService {
      * @see {VflowComponent.view}
      */
     view: WritableSignal<[number, number] | 'auto'>;
-    flowWidth: import("@angular/core").Signal<string | number>;
-    flowHeight: import("@angular/core").Signal<string | number>;
+    /**
+     * Set based on view property. May change if view is 'auto'
+     */
+    computedFlowWidth: WritableSignal<number>;
+    /**
+     * Set based on view property. May change if view is 'auto'
+     */
+    computedFlowHeight: WritableSignal<number>;
+    minZoom: WritableSignal<number>;
+    maxZoom: WritableSignal<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowSettingsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FlowSettingsService>;
 }

package/lib/vflow/services/flow-status.service.d.ts

@@ -1,5 +1,6 @@
 import { NodeModel } from '../models/node.model';
 import { HandleModel } from '../models/handle.model';
+import { ConnectionInternal } from '../interfaces/connection.internal.interface';
 import * as i0 from "@angular/core";
 export interface FlowStatusIdle {
     state: 'idle';
@@ -7,37 +8,25 @@ export interface FlowStatusIdle {
 }
 export interface FlowStatusConnectionStart {
     state: 'connection-start';
-    payload: {
-        sourceNode: NodeModel;
-        sourceHandle: HandleModel;
-    };
+    payload: Omit<ConnectionInternal, 'target' | 'targetHandle'>;
 }
 export interface FlowStatusConnectionValidation {
     state: 'connection-validation';
-    payload: {
-        sourceNode: NodeModel;
-        targetNode: NodeModel;
-        sourceHandle: HandleModel;
-        targetHandle: HandleModel;
+    payload: ConnectionInternal & {
         valid: boolean;
     };
 }
 export interface FlowStatusConnectionEnd {
     state: 'connection-end';
-    payload: {
-        sourceNode: NodeModel;
-        targetNode: NodeModel;
-        sourceHandle: HandleModel;
-        targetHandle: HandleModel;
-    };
+    payload: ConnectionInternal;
 }
 export type FlowStatus = FlowStatusIdle | FlowStatusConnectionStart | FlowStatusConnectionValidation | FlowStatusConnectionEnd;
 export declare class FlowStatusService {
     readonly status: import("@angular/core").WritableSignal<FlowStatus>;
     setIdleStatus(): void;
-    setConnectionStartStatus(sourceNode: NodeModel, sourceHandle: HandleModel): void;
-    setConnectionValidationStatus(valid: boolean, sourceNode: NodeModel, targetNode: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel): void;
-    setConnectionEndStatus(sourceNode: NodeModel, targetNode: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel): void;
+    setConnectionStartStatus(source: NodeModel, sourceHandle: HandleModel): void;
+    setConnectionValidationStatus(valid: boolean, source: NodeModel, target: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel): void;
+    setConnectionEndStatus(source: NodeModel, target: NodeModel, sourceHandle: HandleModel, targetHandle: HandleModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowStatusService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FlowStatusService>;
 }

package/lib/vflow/services/viewport.service.d.ts

@@ -1,7 +1,10 @@
 import { WritableSignal } from '@angular/core';
 import { ViewportState, WritableViewport } from '../interfaces/viewport.interface';
+import { FitViewOptions } from '../interfaces/fit-view-options.interface';
 import * as i0 from "@angular/core";
 export declare class ViewportService {
+    private entitiesService;
+    private flowSettingsService;
     /**
      * The default value used by d3, just copy it here
      *
@@ -19,6 +22,8 @@ export declare class ViewportService {
      * - writableViewport signal
      */
     readonly readableViewport: WritableSignal<ViewportState>;
+    fitView(options?: FitViewOptions): void;
+    private getBoundsNodes;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewportService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ViewportService>;
 }

package/lib/vflow/types/connection-mode.type.d.ts

@@ -0,0 +1 @@
+export type ConnectionMode = 'loose' | 'strict';

package/lib/vflow/utils/adjust-direction.d.ts

@@ -0,0 +1,11 @@
+import { ConnectionInternal } from "../interfaces/connection.internal.interface";
+/**
+ * This function contains a hack-y behavior.
+ * If the handles are of the same type (source-source or target-target),
+ * it returns nodes where source === target and
+ * handles where sourceHandle === targetHandle
+ *
+ * This leads to that notSelfValidator returns false for these cases,
+ * exactly what we need for strict connection type
+ */
+export declare function adjustDirection(connection: ConnectionInternal): ConnectionInternal;

package/lib/vflow/utils/nodes.d.ts

@@ -0,0 +1,3 @@
+import { Rect } from "../interfaces/rect";
+import { NodeModel } from "../models/node.model";
+export declare function getNodesBounds(nodes: NodeModel[]): Rect;

package/lib/vflow/utils/viewport.d.ts

@@ -0,0 +1,4 @@
+import { Rect } from "../interfaces/rect";
+import { ViewportState } from "../interfaces/viewport.interface";
+export declare function getViewportForBounds(bounds: Rect, width: number, height: number, minZoom: number, maxZoom: number, padding: number): ViewportState;
+export declare function clamp(value: number, min?: number, max?: number): number;

package/lib/vflow/vflow.module.d.ts

@@ -15,10 +15,11 @@ import * as i13 from "./directives/handle-size-controller.directive";
 import * as i14 from "./directives/selectable.directive";
 import * as i15 from "./directives/pointer.directive";
 import * as i16 from "./directives/root-pointer.directive";
-import * as i17 from "./directives/template.directive";
-import * as i18 from "@angular/common";
+import * as i17 from "./directives/flow-size-controller.directive";
+import * as i18 from "./directives/template.directive";
+import * as i19 from "@angular/common";
 export declare class VflowModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<VflowModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<VflowModule, [typeof i1.VflowComponent, typeof i2.NodeComponent, typeof i3.EdgeComponent, typeof i4.EdgeLabelComponent, typeof i5.ConnectionComponent, typeof i6.HandleComponent, typeof i7.DefsComponent, typeof i8.BackgroundComponent, typeof i9.SpacePointContextDirective, typeof i10.MapContextDirective, typeof i11.RootSvgReferenceDirective, typeof i12.RootSvgContextDirective, typeof i13.HandleSizeControllerDirective, typeof i14.SelectableDirective, typeof i15.PointerDirective, typeof i16.RootPointerDirective, typeof i17.NodeHtmlTemplateDirective, typeof i17.EdgeLabelHtmlTemplateDirective, typeof i17.EdgeTemplateDirective, typeof i17.ConnectionTemplateDirective, typeof i17.HandleTemplateDirective], [typeof i18.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i14.SelectableDirective, typeof i17.NodeHtmlTemplateDirective, typeof i17.EdgeLabelHtmlTemplateDirective, typeof i17.EdgeTemplateDirective, typeof i17.ConnectionTemplateDirective, typeof i17.HandleTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VflowModule, [typeof i1.VflowComponent, typeof i2.NodeComponent, typeof i3.EdgeComponent, typeof i4.EdgeLabelComponent, typeof i5.ConnectionComponent, typeof i6.HandleComponent, typeof i7.DefsComponent, typeof i8.BackgroundComponent, typeof i9.SpacePointContextDirective, typeof i10.MapContextDirective, typeof i11.RootSvgReferenceDirective, typeof i12.RootSvgContextDirective, typeof i13.HandleSizeControllerDirective, typeof i14.SelectableDirective, typeof i15.PointerDirective, typeof i16.RootPointerDirective, typeof i17.FlowSizeControllerDirective, typeof i18.NodeHtmlTemplateDirective, typeof i18.EdgeLabelHtmlTemplateDirective, typeof i18.EdgeTemplateDirective, typeof i18.ConnectionTemplateDirective, typeof i18.HandleTemplateDirective], [typeof i19.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i14.SelectableDirective, typeof i18.NodeHtmlTemplateDirective, typeof i18.EdgeLabelHtmlTemplateDirective, typeof i18.EdgeTemplateDirective, typeof i18.ConnectionTemplateDirective, typeof i18.HandleTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VflowModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-vflow",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "license": "MIT",
   "homepage": "https://www.ngx-vflow.org/",
   "author": "Artem Mangilev",

package/public-api.d.ts

@@ -10,10 +10,12 @@ export * from './lib/vflow/interfaces/handle-positions.interface';
 export * from './lib/vflow/interfaces/marker.interface';
 export { ViewportState } from './lib/vflow/interfaces/viewport.interface';
 export * from './lib/vflow/interfaces/component-node-event.interface';
+export * from './lib/vflow/interfaces/fit-view-options.interface';
 export * from './lib/vflow/types/node-change.type';
 export * from './lib/vflow/types/edge-change.type';
 export * from './lib/vflow/types/position.type';
 export * from './lib/vflow/types/background.type';
+export * from './lib/vflow/types/connection-mode.type';
 export * from './lib/vflow/components/vflow/vflow.component';
 export * from './lib/vflow/components/handle/handle.component';
 export * from './lib/vflow/public-components/custom-node.component';