ngx-vflow 0.2.2 → 0.4.0

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

@@ -1,16 +1,19 @@
-import { OnInit, Signal, TemplateRef } from '@angular/core';
+import { Injector, OnInit, Signal, TemplateRef } from '@angular/core';
 import { EdgeModel } from '../../models/edge.model';
 import { EdgeContext } from '../../interfaces/template-context.interface';
 import * as i0 from "@angular/core";
 export declare class EdgeComponent implements OnInit {
+    protected injector: Injector;
+    private selectionService;
+    private flowSettingsService;
     model: EdgeModel;
     edgeTemplate?: TemplateRef<EdgeContext>;
     edgeLabelHtmlTemplate?: TemplateRef<any>;
     protected markerStartUrl: Signal<string>;
     protected markerEndUrl: Signal<string>;
-    protected readonly defaultColor = "rgb(177, 177, 183)";
     protected edgeContext: EdgeContext;
     ngOnInit(): void;
+    onEdgeMouseDown(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EdgeComponent, "g[edge]", never, { "model": { "alias": "model"; "required": false; }; "edgeTemplate": { "alias": "edgeTemplate"; "required": false; }; "edgeLabelHtmlTemplate": { "alias": "edgeLabelHtmlTemplate"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1,8 +1,10 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { Injector, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Position } from '../../types/position.type';
 import { HandleModel } from '../../models/handle.model';
+import { WithInjector } from '../../decorators/run-in-injection-context.decorator';
 import * as i0 from "@angular/core";
-export declare class HandleComponent implements OnInit, OnDestroy {
+export declare class HandleComponent implements OnInit, OnDestroy, WithInjector {
+    injector: Injector;
     private handleService;
     private element;
     /**
@@ -17,10 +19,10 @@ export declare class HandleComponent implements OnInit, OnDestroy {
      * Should be used if node has more than one source/target
      */
     id?: string;
+    template?: TemplateRef<any>;
     model: HandleModel;
     ngOnInit(): void;
     ngOnDestroy(): void;
-    private parentRect;
     static ɵfac: i0.ɵɵFactoryDeclaration<HandleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HandleComponent, "handle", never, { "position": { "alias": "position"; "required": true; }; "type": { "alias": "type"; "required": true; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HandleComponent, "handle", never, { "position": { "alias": "position"; "required": true; }; "type": { "alias": "type"; "required": true; }; "id": { "alias": "id"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1,12 +1,14 @@
-import { AfterViewInit, ElementRef, Injector, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { AfterViewInit, ElementRef, Injector, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { NodeModel } from '../../models/node.model';
 import { HandleService } from '../../services/handle.service';
 import { HandleModel } from '../../models/handle.model';
+import { WithInjector } from '../../decorators/run-in-injection-context.decorator';
 import * as i0 from "@angular/core";
 export type HandleState = 'valid' | 'invalid' | 'idle';
-export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy {
+export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy, WithInjector {
+    injector: Injector;
     protected handleService: HandleService;
-    protected injector: Injector;
+    protected zone: NgZone;
     nodeModel: NodeModel;
     nodeHtmlTemplate?: TemplateRef<any>;
     nodeContentRef: ElementRef<SVGGraphicsElement>;
@@ -14,10 +16,12 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy {
     private draggableService;
     private flowStatusService;
     private flowEntitiesService;
+    private nodeRenderingService;
+    private flowSettingsService;
+    private selectionService;
     private hostRef;
     protected showMagnet: import("@angular/core").Signal<boolean>;
-    private sourceHanldeState;
-    private targetHandleState;
+    private subscription;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -30,7 +34,10 @@ export declare class NodeComponent implements OnInit, AfterViewInit, OnDestroy {
     /**
      * TODO srp
      */
-    protected resetValidateTargetHandle(): void;
+    protected resetValidateTargetHandle(targetHandle: 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

@@ -6,7 +6,6 @@ import { Edge } from '../../interfaces/edge.interface';
 import { EdgeModel } from '../../models/edge.model';
 import { ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, NodeHtmlTemplateDirective } from '../../directives/template.directive';
 import { HandlePositions } from '../../interfaces/handle-positions.interface';
-import { FlowModel } from '../../models/flow.model';
 import { Point } from '../../interfaces/point.interface';
 import { ViewportState } from '../../interfaces/viewport.interface';
 import { ConnectionModel } from '../../models/connection.model';
@@ -21,6 +20,8 @@ export declare class VflowComponent {
     private flowEntitiesService;
     private nodesChangeService;
     private edgesChangeService;
+    private nodeRenderingService;
+    private flowSettingsService;
     private injector;
     /**
      * Size for flow view
@@ -54,6 +55,10 @@ export declare class VflowComponent {
      * Background color for flow
      */
     background: string;
+    /**
+     * Global rule if you can or can't select entities
+     */
+    set entitiesSelectable(value: boolean);
     /**
      * Settings for connection (it renders when user tries to create edge between nodes)
      *
@@ -65,12 +70,12 @@ export declare class VflowComponent {
      * Nodes to render
      */
     set nodes(newNodes: Node[]);
-    protected get nodeModels(): NodeModel<unknown>[];
+    protected nodeModels: Signal<NodeModel<unknown>[]>;
     /**
      * Edges to render
      */
     set edges(newEdges: Edge[]);
-    protected get edgeModels(): EdgeModel[];
+    protected edgeModels: Signal<EdgeModel[]>;
     protected nodeHtmlDirective?: NodeHtmlTemplateDirective;
     protected edgeTemplateDirective?: EdgeTemplateDirective;
     protected edgeLabelHtmlDirective?: EdgeLabelHtmlTemplateDirective;
@@ -100,7 +105,8 @@ export declare class VflowComponent {
      * Observable with nodes change
      */
     readonly edgesChange$: import("rxjs").Observable<EdgeChange[]>;
-    protected flowModel: FlowModel;
+    protected flowWidth: Signal<string | number>;
+    protected flowHeight: Signal<string | number>;
     protected markers: Signal<Map<number, import("ngx-vflow").Marker>>;
     /**
      * Change viewport to specified state
@@ -130,9 +136,9 @@ export declare class VflowComponent {
      * Sync method to get detached edges
      */
     getDetachedEdges(): Edge[];
-    protected trackNodes(idx: number, { node }: NodeModel): string;
-    protected trackEdges(idx: number, { edge }: EdgeModel): string;
+    protected trackNodes(idx: number, { node }: NodeModel): Node<unknown>;
+    protected trackEdges(idx: number, { edge }: EdgeModel): Edge<unknown>;
     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; }; "connection": { "alias": "connection"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, {}, ["nodeHtmlDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, false, [{ directive: typeof i1.ConnectionControllerDirective; inputs: {}; outputs: { "onConnect": "onConnect"; }; }, { directive: typeof i2.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onEdgesChange": "onEdgesChange"; }; }]>;
+    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; }; "entitiesSelectable": { "alias": "entitiesSelectable"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "nodes": { "alias": "nodes"; "required": true; }; "edges": { "alias": "edges"; "required": false; }; }, {}, ["nodeHtmlDirective", "edgeTemplateDirective", "edgeLabelHtmlDirective", "connectionTemplateDirective"], never, false, [{ directive: typeof i1.ConnectionControllerDirective; inputs: {}; outputs: { "onConnect": "onConnect"; }; }, { directive: typeof i2.ChangesControllerDirective; inputs: {}; outputs: { "onNodesChange": "onNodesChange"; "onEdgesChange": "onEdgesChange"; }; }]>;
     static ngAcceptInputType_connection: i3.ConnectionSettings;
 }

package/lib/vflow/decorators/microtask.decorator.d.ts

@@ -0,0 +1 @@
+export declare function Microtask(target: any, key: string, descriptor: TypedPropertyDescriptor<(...args: any[]) => void>): TypedPropertyDescriptor<(...args: any[]) => void>;

package/lib/vflow/decorators/run-in-injection-context.decorator.d.ts

@@ -0,0 +1,5 @@
+import { Injector } from "@angular/core";
+export declare function InjectionContext(target: any, key: string, descriptor: PropertyDescriptor): PropertyDescriptor;
+export interface WithInjector {
+    injector: Injector;
+}

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

@@ -0,0 +1,10 @@
+import { AfterViewInit } from '@angular/core';
+import { HandleModel } from '../models/handle.model';
+import * as i0 from "@angular/core";
+export declare class HandleSizeControllerDirective implements AfterViewInit {
+    handleModel: HandleModel;
+    private handleWrapper;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HandleSizeControllerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HandleSizeControllerDirective, "[handleSizeController]", never, { "handleModel": { "alias": "handleSizeController"; "required": true; }; }, {}, never, never, false, never>;
+}

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

@@ -1,19 +1,24 @@
 import { OnInit } from '@angular/core';
 import { ZoomBehavior } from 'd3-zoom';
 import { ViewportService } from '../services/viewport.service';
+import { SelectionService, ViewportForSelection } from '../services/selection.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 rootSvgSelection: import("d3-selection").Selection<SVGSVGElement, unknown, null, undefined>;
     protected zoomableSelection: import("d3-selection").Selection<SVGGElement, unknown, null, undefined>;
+    protected viewportForSelection: Partial<ViewportForSelection>;
     protected manualViewportChangeEffect: import("@angular/core").EffectRef;
     protected zoomBehavior: ZoomBehavior<SVGSVGElement, unknown>;
     ngOnInit(): void;
     private handleZoom;
+    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>;
 }

package/lib/vflow/directives/selectable.directive.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export declare class SelectableDirective {
+    private flowSettingsService;
+    private selectionService;
+    private parentEdge;
+    private parentNode;
+    protected onMousedown(): void;
+    private entity;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectableDirective, "[selectable]", never, {}, {}, never, never, false, never>;
+}

package/lib/vflow/interfaces/flow-entity.interface.d.ts

@@ -0,0 +1,4 @@
+import { WritableSignal } from "@angular/core";
+export interface FlowEntity {
+    selected: WritableSignal<boolean>;
+}

package/lib/vflow/interfaces/template-context.interface.d.ts

@@ -6,5 +6,6 @@ export interface EdgeContext {
         path: Signal<string>;
         markerStart: Signal<string>;
         markerEnd: Signal<string>;
+        selected: Signal<boolean>;
     };
 }

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

@@ -1,13 +1,17 @@
+import { WritableSignal } from "@angular/core";
 import { EdgeLabelPosition } from "../interfaces/edge-label.interface";
 import { Edge, Curve, EdgeType } from "../interfaces/edge.interface";
 import { EdgeLabelModel } from "./edge-label.model";
 import { NodeModel } from "./node.model";
-export declare class EdgeModel {
+import { FlowEntity } from "../interfaces/flow-entity.interface";
+export declare class EdgeModel implements FlowEntity {
     edge: Edge;
-    source: NodeModel;
-    target: NodeModel;
+    source: WritableSignal<NodeModel<unknown> | undefined>;
+    target: WritableSignal<NodeModel<unknown> | undefined>;
     curve: Curve;
     type: EdgeType;
+    selected: WritableSignal<boolean>;
+    selected$: import("rxjs").Observable<boolean>;
     detached: import("@angular/core").Signal<boolean>;
     detached$: import("rxjs").Observable<boolean>;
     path: import("@angular/core").Signal<{

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

@@ -1,9 +1,14 @@
 import { NodeHandle } from "../services/handle.service";
 import { NodeModel } from "./node.model";
+export type HandleState = 'valid' | 'invalid' | 'idle';
 export declare class HandleModel {
     rawHandle: NodeHandle;
     private parentNode;
     readonly strokeWidth = 2;
+    /**
+     * Pre-computed size for default handle, changed dynamically
+     * for custom handles
+     */
     size: import("@angular/core").WritableSignal<{
         width: number;
         height: number;
@@ -20,10 +25,33 @@ export declare class HandleModel {
         x: number;
         y: number;
     }>;
-    parentSize: import("@angular/core").WritableSignal<{
+    state: import("@angular/core").WritableSignal<HandleState>;
+    private updateParentSizeAndPosition$;
+    parentSize: import("@angular/core").Signal<{
         width: number;
         height: number;
+    } | {
+        width: number;
+        height: number;
+    }>;
+    parentPosition: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
     }>;
-    parentPosition: import("@angular/core").WritableSignal<import("ngx-vflow").Point>;
+    parentReference: HTMLElement;
+    template: import("@angular/core").TemplateRef<any> | undefined;
+    templateContext: {
+        $implicit: {
+            point: import("@angular/core").Signal<{
+                x: number;
+                y: number;
+            }>;
+            state: import("@angular/core").WritableSignal<HandleState>;
+        };
+    };
     constructor(rawHandle: NodeHandle, parentNode: NodeModel);
+    updateParent(): void;
 }

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

@@ -1,8 +1,9 @@
 import { Node } from '../interfaces/node.interface';
-import { FlowModel } from './flow.model';
 import { HandleModel } from './handle.model';
-export declare class NodeModel<T = unknown> {
+import { FlowEntity } from '../interfaces/flow-entity.interface';
+export declare class NodeModel<T = unknown> implements FlowEntity {
     node: Node<T>;
+    private flowSettingsService;
     point: import("@angular/core").WritableSignal<{
         x: number;
         y: number;
@@ -15,19 +16,15 @@ export declare class NodeModel<T = unknown> {
         width: number;
         height: number;
     }>;
+    renderOrder: import("@angular/core").WritableSignal<number>;
+    selected: import("@angular/core").WritableSignal<boolean>;
+    selected$: import("rxjs").Observable<boolean>;
     pointTransform: import("@angular/core").Signal<string>;
     sourcePosition: import("@angular/core").Signal<import("ngx-vflow").Position>;
     targetPosition: import("@angular/core").Signal<import("ngx-vflow").Position>;
-    handles: import("@angular/core").Signal<HandleModel[]>;
-    rawHandles: import("@angular/core").WritableSignal<HandleModel[]>;
+    handles: import("@angular/core").WritableSignal<HandleModel[]>;
+    handles$: import("rxjs").Observable<HandleModel[]>;
     draggable: boolean;
     readonly magnetRadius = 20;
-    private flow;
     constructor(node: Node<T>);
-    /**
-     * Bind parent flow model to node
-     *
-     * @param flow parent flow
-     */
-    bindFlow(flow: FlowModel): void;
 }

package/lib/vflow/services/edge-changes.service.d.ts

@@ -16,6 +16,11 @@ export declare class EdgeChangesService {
         type: "remove";
         id: string;
     }[]>;
+    protected edgeSelectChange$: Observable<{
+        type: "select";
+        id: string;
+        selected: boolean;
+    }[]>;
     readonly changes$: Observable<EdgeChange[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EdgeChangesService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<EdgeChangesService>;

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

@@ -1,14 +1,17 @@
+import { Signal } from '@angular/core';
 import { NodeModel } from '../models/node.model';
 import { EdgeModel } from '../models/edge.model';
 import { ConnectionModel } from '../models/connection.model';
 import { Marker } from '../interfaces/marker.interface';
+import { FlowEntity } from '../interfaces/flow-entity.interface';
 import * as i0 from "@angular/core";
 export declare class FlowEntitiesService {
     readonly nodes: import("@angular/core").WritableSignal<NodeModel<unknown>[]>;
     readonly edges: import("@angular/core").WritableSignal<EdgeModel[]>;
     readonly connection: import("@angular/core").WritableSignal<ConnectionModel>;
-    readonly markers: import("@angular/core").Signal<Map<number, Marker>>;
-    readonly validEdges: import("@angular/core").Signal<EdgeModel[]>;
+    readonly markers: Signal<Map<number, Marker>>;
+    readonly validEdges: Signal<EdgeModel[]>;
+    entities: Signal<FlowEntity[]>;
     getNode<T>(id: string): NodeModel<T> | undefined;
     getDetachedEdges(): EdgeModel[];
     static ɵfac: i0.ɵɵFactoryDeclaration<FlowEntitiesService, never>;

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

@@ -0,0 +1,20 @@
+import { WritableSignal } from '@angular/core';
+import { HandlePositions } from '../interfaces/handle-positions.interface';
+import * as i0 from "@angular/core";
+export declare class FlowSettingsService {
+    entitiesSelectable: WritableSignal<boolean>;
+    /**
+     * Global setting with handle positions. Nodes derive this value
+     *
+     * @deprecated
+     */
+    handlePositions: WritableSignal<HandlePositions>;
+    /**
+     * @see {VflowComponent.view}
+     */
+    view: WritableSignal<[number, number] | 'auto'>;
+    flowWidth: import("@angular/core").Signal<string | number>;
+    flowHeight: import("@angular/core").Signal<string | number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlowSettingsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FlowSettingsService>;
+}

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

@@ -1,18 +1,15 @@
+import { TemplateRef } from '@angular/core';
 import { Position } from '../types/position.type';
 import { HandleType } from '../types/handle-type.type';
-import { Point } from '../interfaces/point.interface';
 import { NodeModel } from '../models/node.model';
 import { HandleModel } from '../models/handle.model';
 import * as i0 from "@angular/core";
 export interface NodeHandle {
     position: Position;
     type: HandleType;
-    parentPosition: Point;
-    parentSize: {
-        width: number;
-        height: number;
-    };
     id?: string;
+    parentReference?: HTMLElement;
+    template?: TemplateRef<any>;
 }
 export declare class HandleService {
     readonly node: import("@angular/core").WritableSignal<NodeModel<unknown> | null>;

package/lib/vflow/services/node-changes.service.d.ts

@@ -20,6 +20,11 @@ export declare class NodesChangeService {
         type: "remove";
         id: string;
     }[]>;
+    protected nodeSelectedChange$: Observable<{
+        type: "select";
+        id: string;
+        selected: boolean;
+    }[]>;
     readonly changes$: Observable<NodeChange[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodesChangeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NodesChangeService>;

package/lib/vflow/services/node-rendering.service.d.ts

@@ -0,0 +1,9 @@
+import { NodeModel } from '../models/node.model';
+import * as i0 from "@angular/core";
+export declare class NodeRenderingService {
+    private flowEntitiesService;
+    readonly nodes: import("@angular/core").Signal<NodeModel<unknown>[]>;
+    pullNode(node: NodeModel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeRenderingService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NodeRenderingService>;
+}

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

@@ -0,0 +1,19 @@
+import { ViewportState } from '../interfaces/viewport.interface';
+import { FlowEntity } from '../interfaces/flow-entity.interface';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface ViewportForSelection {
+    start: ViewportState;
+    end: ViewportState;
+    target: Element;
+}
+export declare class SelectionService {
+    private static delta;
+    private flowEntitiesService;
+    protected viewport$: Subject<ViewportForSelection>;
+    protected resetSelection: import("rxjs").Subscription;
+    setViewport(viewport: ViewportForSelection): void;
+    select(entity: FlowEntity | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SelectionService>;
+}

package/lib/vflow/types/edge-change.type.d.ts

@@ -1,4 +1,4 @@
-export type EdgeChange = EdgeDetachedChange | EdgeAddChange | EdgeRemoveChange;
+export type EdgeChange = EdgeDetachedChange | EdgeAddChange | EdgeRemoveChange | EdgeSelectChange;
 /**
  * @experimental
  */
@@ -11,6 +11,10 @@ export interface EdgeAddChange extends EdgeChangeShared {
 export interface EdgeRemoveChange extends EdgeChangeShared {
     type: 'remove';
 }
+export interface EdgeSelectChange extends EdgeChangeShared {
+    type: 'select';
+    selected: boolean;
+}
 interface EdgeChangeShared {
     id: string;
 }

package/lib/vflow/types/node-change.type.d.ts

@@ -1,5 +1,5 @@
 import { Point } from "../interfaces/point.interface";
-export type NodeChange = NodePositionChange | NodeAddChange | NodeRemoveChange;
+export type NodeChange = NodePositionChange | NodeAddChange | NodeRemoveChange | NodeSelectedChange;
 export interface NodePositionChange extends NodeChangeShared {
     type: 'position';
     point: Point;
@@ -10,6 +10,10 @@ export interface NodeAddChange extends NodeChangeShared {
 export interface NodeRemoveChange extends NodeChangeShared {
     type: 'remove';
 }
+export interface NodeSelectedChange extends NodeChangeShared {
+    type: 'select';
+    selected: boolean;
+}
 interface NodeChangeShared {
     id: string;
 }

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

@@ -0,0 +1,3 @@
+import { NgZone } from "@angular/core";
+import { Observable } from "rxjs";
+export declare function resizable(elems: Element[], zone: NgZone): Observable<ResizeObserverEntry[]>;

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

@@ -10,10 +10,12 @@ import * as i8 from "./directives/space-point-context.directive";
 import * as i9 from "./directives/map-context.directive";
 import * as i10 from "./directives/reference.directive";
 import * as i11 from "./directives/root-svg-context.directive";
-import * as i12 from "./directives/template.directive";
-import * as i13 from "@angular/common";
+import * as i12 from "./directives/handle-size-controller.directive";
+import * as i13 from "./directives/selectable.directive";
+import * as i14 from "./directives/template.directive";
+import * as i15 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.SpacePointContextDirective, typeof i9.MapContextDirective, typeof i10.RootSvgReferenceDirective, typeof i11.RootSvgContextDirective, typeof i12.NodeHtmlTemplateDirective, typeof i12.EdgeLabelHtmlTemplateDirective, typeof i12.EdgeTemplateDirective, typeof i12.ConnectionTemplateDirective, typeof i12.HandleTemplateDirective], [typeof i13.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i12.NodeHtmlTemplateDirective, typeof i12.EdgeLabelHtmlTemplateDirective, typeof i12.EdgeTemplateDirective, typeof i12.ConnectionTemplateDirective, typeof i12.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.SpacePointContextDirective, typeof i9.MapContextDirective, typeof i10.RootSvgReferenceDirective, typeof i11.RootSvgContextDirective, typeof i12.HandleSizeControllerDirective, typeof i13.SelectableDirective, typeof i14.NodeHtmlTemplateDirective, typeof i14.EdgeLabelHtmlTemplateDirective, typeof i14.EdgeTemplateDirective, typeof i14.ConnectionTemplateDirective, typeof i14.HandleTemplateDirective], [typeof i15.CommonModule], [typeof i1.VflowComponent, typeof i6.HandleComponent, typeof i13.SelectableDirective, typeof i14.NodeHtmlTemplateDirective, typeof i14.EdgeLabelHtmlTemplateDirective, typeof i14.EdgeTemplateDirective, typeof i14.ConnectionTemplateDirective, typeof i14.HandleTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VflowModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-vflow",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "license": "MIT",
   "homepage": "https://www.ngx-vflow.org/",
   "author": "Artem Mangilev",
@@ -16,8 +16,8 @@
     "type": "git"
   },
   "peerDependencies": {
-    "@angular/common": "^16.2.0 || 17.x",
-    "@angular/core": "^16.2.0 || 17.x",
+    "@angular/common": "^16.2.0 || 17.x || 18.x",
+    "@angular/core": "^16.2.0 || 17.x || 18.x",
     "d3-drag": "^3.0.0",
     "d3-path": "^3.1.0",
     "d3-selection": "^3.0.0",

package/public-api.d.ts

@@ -17,3 +17,4 @@ export * from './lib/vflow/components/handle/handle.component';
 export * from './lib/vflow/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';
+export * from './lib/vflow/directives/selectable.directive';

package/esm2022/lib/vflow/models/flow.model.mjs

@@ -1,18 +0,0 @@
-import { computed, signal } from "@angular/core";
-export class FlowModel {
-    constructor() {
-        /**
-         * Global setting with handle positions. Nodes derive this value
-         *
-         * @deprecated
-         */
-        this.handlePositions = signal({ source: 'right', target: 'left' });
-        /**
-         * @see {VflowComponent.view}
-         */
-        this.view = signal([400, 400]);
-        this.flowWidth = computed(() => this.view() === 'auto' ? '100%' : this.view()[0]);
-        this.flowHeight = computed(() => this.view() === 'auto' ? '100%' : this.view()[1]);
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxvdy5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL2xpYi92Zmxvdy9tb2RlbHMvZmxvdy5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQTBCLFFBQVEsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHekUsTUFBTSxPQUFPLFNBQVM7SUFBdEI7UUFDRTs7OztXQUlHO1FBQ0ksb0JBQWUsR0FBb0MsTUFBTSxDQUFDLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQTtRQUVyRzs7V0FFRztRQUNJLFNBQUksR0FBOEMsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUE7UUFFcEUsY0FBUyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBRTVFLGVBQVUsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQTtJQUN0RixDQUFDO0NBQUEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBTaWduYWwsIFdyaXRhYmxlU2lnbmFsLCBjb21wdXRlZCwgc2lnbmFsIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEhhbmRsZVBvc2l0aW9ucyB9IGZyb20gXCIuLi9pbnRlcmZhY2VzL2hhbmRsZS1wb3NpdGlvbnMuaW50ZXJmYWNlXCI7XG5cbmV4cG9ydCBjbGFzcyBGbG93TW9kZWwge1xuICAvKipcbiAgICogR2xvYmFsIHNldHRpbmcgd2l0aCBoYW5kbGUgcG9zaXRpb25zLiBOb2RlcyBkZXJpdmUgdGhpcyB2YWx1ZVxuICAgKlxuICAgKiBAZGVwcmVjYXRlZFxuICAgKi9cbiAgcHVibGljIGhhbmRsZVBvc2l0aW9uczogV3JpdGFibGVTaWduYWw8SGFuZGxlUG9zaXRpb25zPiA9IHNpZ25hbCh7IHNvdXJjZTogJ3JpZ2h0JywgdGFyZ2V0OiAnbGVmdCcgfSlcblxuICAvKipcbiAgICogQHNlZSB7VmZsb3dDb21wb25lbnQudmlld31cbiAgICovXG4gIHB1YmxpYyB2aWV3OiBXcml0YWJsZVNpZ25hbDxbbnVtYmVyLCBudW1iZXJdIHwgJ2F1dG8nPiA9IHNpZ25hbChbNDAwLCA0MDBdKVxuXG4gIHB1YmxpYyBmbG93V2lkdGggPSBjb21wdXRlZCgoKSA9PiB0aGlzLnZpZXcoKSA9PT0gJ2F1dG8nID8gJzEwMCUnIDogdGhpcy52aWV3KClbMF0pXG5cbiAgcHVibGljIGZsb3dIZWlnaHQgPSBjb21wdXRlZCgoKSA9PiB0aGlzLnZpZXcoKSA9PT0gJ2F1dG8nID8gJzEwMCUnIDogdGhpcy52aWV3KClbMV0pXG59XG4iXX0=

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

@@ -1,16 +0,0 @@
-import { Signal, WritableSignal } from "@angular/core";
-import { HandlePositions } from "../interfaces/handle-positions.interface";
-export declare class FlowModel {
-    /**
-     * Global setting with handle positions. Nodes derive this value
-     *
-     * @deprecated
-     */
-    handlePositions: WritableSignal<HandlePositions>;
-    /**
-     * @see {VflowComponent.view}
-     */
-    view: WritableSignal<[number, number] | 'auto'>;
-    flowWidth: Signal<string | number>;
-    flowHeight: Signal<string | number>;
-}