ngx-vflow 0.13.0-0 → 0.13.0

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

@@ -15,6 +15,7 @@ import { Background } from '../../types/background.type';
 import { SpacePointContextDirective } from '../../directives/space-point-context.directive';
 import { FitViewOptions } from '../../interfaces/fit-view-options.interface';
 import { Optimization } from '../../interfaces/optimization.interface';
+import { KeyboardShortcuts } from '../../types/keyboard-action.type';
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/connection-controller.directive";
 import * as i2 from "../../directives/changes-controller.directive";
@@ -27,6 +28,7 @@ export declare class VflowComponent implements OnInit {
     private nodeRenderingService;
     private flowSettingsService;
     private componentEventBusService;
+    private keyboardService;
     private injector;
     /**
      * Size for flow view
@@ -65,6 +67,7 @@ export declare class VflowComponent implements OnInit {
      * Global rule if you can or can't select entities
      */
     set entitiesSelectable(value: boolean);
+    set keyboardShortcuts(value: KeyboardShortcuts);
     /**
      * Settings for connection (it renders when user tries to create edge between nodes)
      *
@@ -158,6 +161,6 @@ export declare class VflowComponent implements OnInit {
     protected trackEdges(idx: number, { edge }: EdgeModel): Edge<unknown>;
     private setInitialNodesOrder;
     static ɵfac: i0.ɵɵFactoryDeclaration<VflowComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VflowComponent, "vflow", never, { "view": { "alias": "view"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "handlePositions": { "alias": "handlePositions"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, false, [{ directive: typeof i1.ConnectionControllerDirective; inputs: {}; outputs: { "onConnect": "onConnect"; }; }, { directive: typeof i2.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onNodesChange.position": "onNodesChange.position"; "onNodesChange.position.single": "onNodesChange.position.single"; "onNodesChange.position.many": "onNodesChange.position.many"; "onNodesChange.size": "onNodesChange.size"; "onNodesChange.size.single": "onNodesChange.size.single"; "onNodesChange.size.many": "onNodesChange.size.many"; "onNodesChange.add": "onNodesChange.add"; "onNodesChange.add.single": "onNodesChange.add.single"; "onNodesChange.add.many": "onNodesChange.add.many"; "onNodesChange.remove": "onNodesChange.remove"; "onNodesChange.remove.single": "onNodesChange.remove.single"; "onNodesChange.remove.many": "onNodesChange.remove.many"; "onNodesChange.select": "onNodesChange.select"; "onNodesChange.select.single": "onNodesChange.select.single"; "onNodesChange.select.many": "onNodesChange.select.many"; "onEdgesChange": "onEdgesChange"; "onEdgesChange.detached": "onEdgesChange.detached"; "onEdgesChange.detached.single": "onEdgesChange.detached.single"; "onEdgesChange.detached.many": "onEdgesChange.detached.many"; "onEdgesChange.add": "onEdgesChange.add"; "onEdgesChange.add.single": "onEdgesChange.add.single"; "onEdgesChange.add.many": "onEdgesChange.add.many"; "onEdgesChange.remove": "onEdgesChange.remove"; "onEdgesChange.remove.single": "onEdgesChange.remove.single"; "onEdgesChange.remove.many": "onEdgesChange.remove.many"; "onEdgesChange.select": "onEdgesChange.select"; "onEdgesChange.select.single": "onEdgesChange.select.single"; "onEdgesChange.select.many": "onEdgesChange.select.many"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VflowComponent, "vflow", never, { "view": { "alias": "view"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "handlePositions": { "alias": "handlePositions"; "required": false; }; "background": { "alias": "background"; "required": false; }; "optimization": { "alias": "optimization"; "required": false; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, { "onComponentNodeEvent": "onComponentNodeEvent"; }, ["nodeTemplateDirective", "groupNodeTemplateDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, false, [{ directive: typeof i1.ConnectionControllerDirective; inputs: {}; outputs: { "onConnect": "onConnect"; }; }, { directive: typeof i2.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onNodesChange.position": "onNodesChange.position"; "onNodesChange.position.single": "onNodesChange.position.single"; "onNodesChange.position.many": "onNodesChange.position.many"; "onNodesChange.size": "onNodesChange.size"; "onNodesChange.size.single": "onNodesChange.size.single"; "onNodesChange.size.many": "onNodesChange.size.many"; "onNodesChange.add": "onNodesChange.add"; "onNodesChange.add.single": "onNodesChange.add.single"; "onNodesChange.add.many": "onNodesChange.add.many"; "onNodesChange.remove": "onNodesChange.remove"; "onNodesChange.remove.single": "onNodesChange.remove.single"; "onNodesChange.remove.many": "onNodesChange.remove.many"; "onNodesChange.select": "onNodesChange.select"; "onNodesChange.select.single": "onNodesChange.select.single"; "onNodesChange.select.many": "onNodesChange.select.many"; "onEdgesChange": "onEdgesChange"; "onEdgesChange.detached": "onEdgesChange.detached"; "onEdgesChange.detached.single": "onEdgesChange.detached.single"; "onEdgesChange.detached.many": "onEdgesChange.detached.many"; "onEdgesChange.add": "onEdgesChange.add"; "onEdgesChange.add.single": "onEdgesChange.add.single"; "onEdgesChange.add.many": "onEdgesChange.add.many"; "onEdgesChange.remove": "onEdgesChange.remove"; "onEdgesChange.remove.single": "onEdgesChange.remove.single"; "onEdgesChange.remove.many": "onEdgesChange.remove.many"; "onEdgesChange.select": "onEdgesChange.select"; "onEdgesChange.select.single": "onEdgesChange.select.single"; "onEdgesChange.select.many": "onEdgesChange.select.many"; }; }]>;
     static ngAcceptInputType_connection: i3.ConnectionSettings;
 }

package/lib/vflow/directives/root-pointer.directive.d.ts

@@ -1,5 +1,13 @@
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+export interface PointerEvent {
+    x: number;
+    y: number;
+    movementX: number;
+    movementY: number;
+    target: Element | null;
+    originalEvent: MouseEvent | TouchEvent;
+}
 export declare class RootPointerDirective {
     private host;
     private initialTouch$;
@@ -9,7 +17,7 @@ export declare class RootPointerDirective {
         y: number;
         movementX: number;
         movementY: number;
-        target: EventTarget | null;
+        target: Element | null;
         originalEvent: MouseEvent;
     }>;
     touchMovement$: Observable<{
@@ -20,21 +28,7 @@ export declare class RootPointerDirective {
         target: Element | null;
         originalEvent: TouchEvent;
     }>;
-    pointerMovement$: Observable<{
-        x: number;
-        y: number;
-        movementX: number;
-        movementY: number;
-        target: EventTarget | null;
-        originalEvent: MouseEvent;
-    } | {
-        x: number;
-        y: number;
-        movementX: number;
-        movementY: number;
-        target: Element | null;
-        originalEvent: TouchEvent;
-    }>;
+    pointerMovement$: Observable<PointerEvent>;
     touchEnd$: Observable<{
         x: number;
         y: number;

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

@@ -9,21 +9,7 @@ export declare class SpacePointContextDirective {
      * Signal with current mouse position in svg space
      */
     svgCurrentSpacePoint: Signal<Point>;
-    pointerMovement: Signal<{
-        x: number;
-        y: number;
-        movementX: number;
-        movementY: number;
-        target: EventTarget | null;
-        originalEvent: MouseEvent;
-    } | {
-        x: number;
-        y: number;
-        movementX: number;
-        movementY: number;
-        target: Element | null;
-        originalEvent: TouchEvent;
-    } | undefined>;
+    pointerMovement: Signal<import("./root-pointer.directive").PointerEvent | 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/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/public-components/resizable/resizable.component.d.ts

@@ -1,16 +1,19 @@
 import { AfterViewInit, OnInit } from '@angular/core';
+import { NodeModel } from '../../models/node.model';
+import { PointerEvent } from '../../directives/root-pointer.directive';
 import * as i0 from "@angular/core";
 type Side = 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export declare class ResizableComponent implements OnInit, AfterViewInit {
     private nodeAccessor;
     private rootPointer;
     private viewportService;
+    private spacePointContext;
     private hostRef;
     set resizable(value: boolean | '');
     resizerColor: string;
     gap: number;
     private resizer;
-    protected get model(): import("../../models/node.model").NodeModel<unknown>;
+    protected get model(): NodeModel<unknown>;
     protected lineGap: number;
     protected handleSize: number;
     private resizeSide;
@@ -22,17 +25,9 @@ export declare class ResizableComponent implements OnInit, AfterViewInit {
     ngOnInit(): void;
     ngAfterViewInit(): void;
     protected startResize(side: Side, event: Event): void;
-    protected resize({ movementX, movementY }: {
-        movementX: number;
-        movementY: number;
-    }): void;
+    protected resize(event: PointerEvent): void;
     protected endResize(): void;
-    private getMaxWidth;
-    private getMaxHeight;
-    private getMinX;
-    private getMinY;
-    private getMaxX;
-    private getMaxY;
+    private isResizeConstrained;
     static ɵfac: i0.ɵɵFactoryDeclaration<ResizableComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ResizableComponent, "[resizable]", never, { "resizable": { "alias": "resizable"; "required": false; }; "resizerColor": { "alias": "resizerColor"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -1,6 +1,7 @@
 import { NodeModel } from '../models/node.model';
 import * as i0 from "@angular/core";
 export declare class DraggableService {
+    private entitiesService;
     /**
      * Enable draggable behavior for element.
      *
@@ -33,6 +34,7 @@ export declare class DraggableService {
      * with disabled drag behavior
      */
     private getIgnoreDragBehavior;
+    private getDragNodes;
     static ɵfac: i0.ɵɵFactoryDeclaration<DraggableService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DraggableService>;
 }

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

@@ -0,0 +1,11 @@
+import { KeyboardAction, KeyboardShortcuts } from '../types/keyboard-action.type';
+import * as i0 from "@angular/core";
+export declare class KeyboardService {
+    private actions;
+    private actionsActive;
+    constructor();
+    setShortcuts(newActions: KeyboardShortcuts): void;
+    isActiveAction(action: KeyboardAction): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KeyboardService>;
+}

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

@@ -13,6 +13,7 @@ export interface ViewportForSelection {
 export declare class SelectionService {
     private static delta;
     private flowEntitiesService;
+    private keyboardService;
     protected viewport$: Subject<ViewportForSelection>;
     protected resetSelection: import("rxjs").Subscription;
     setViewport(viewport: ViewportForSelection): void;

package/lib/vflow/types/keyboard-action.type.d.ts

@@ -0,0 +1,2 @@
+export type KeyboardAction = 'multiSelection';
+export type KeyboardShortcuts = Record<KeyboardAction, null | string[]>;

package/lib/vflow/utils/get-os.d.ts

@@ -0,0 +1 @@
+export declare function getOS(): "macos" | "ios" | "windows" | "android" | "linux" | null;

package/package.json

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

package/public-api.d.ts

@@ -17,6 +17,7 @@ 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/types/keyboard-action.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/custom-node.component';