ngx-vflow 0.8.0 → 0.9.1

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

@@ -13,6 +13,7 @@ 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";
@@ -40,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.
      *
@@ -115,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
@@ -136,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
      *

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/interfaces/box.d.ts

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

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/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/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/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.8.0",
+  "version": "0.9.1",
   "license": "MIT",
   "homepage": "https://www.ngx-vflow.org/",
   "author": "Artem Mangilev",

package/public-api.d.ts

@@ -10,6 +10,7 @@ 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';